How to Hot-Reload in ReactJS Docker

Question

This might sound simple, but I have this problem.

I have two docker containers running. One is for my front-end and other is for my backend services.

these are the Dockerfiles for both services.

front-end Dockerfile :

# Use an official node runtime as a parent image
FROM node:8

WORKDIR /app

# Install dependencies
COPY package.json /app

RUN npm install --silent

# Add rest of the client code
COPY . /app

EXPOSE 3000

CMD npm start

backend Dockerfile :

FROM python:3.7.7

WORKDIR /usr/src/app

COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt

COPY server.py /usr/src/app
COPY . /usr/src/app

EXPOSE 8083

# CMD ["python3", "-m",  "http.server", "8080"]
CMD ["python3", "./server.py"]

I am building images with the docker-compose.yaml as below:

version: "3.2"

services:

  frontend:
    build: ./frontend
    ports:
      - 80:3000
    depends_on: 
      - backend

  backend: 
    build: ./backends/banuka
    ports: 
      - 8080:8083

How can I make this two services Update whenever there is a change to front-end or back-end?

I found this repo, which is a booilerplate for reactjs, python-flask and posgresel, which says it has enabled Hot reload for both reactjs frontend and python-flask backend. But I couldn’t find anything related to that. Can someone help me?

repo link

What I want is: after every code change the container should b e up-to-date automatically !

Asked By: user13456401

||

Source

Answer 1

Try this in your docker-compose.yml

version: "3.2"

services:

  frontend:
    build: ./frontend
    environment:
      CHOKIDAR_USEPOLLING: "true"
    volumes:
      - /app/node_modules
      - ./frontend:/app
    ports:
      - 80:3000
    depends_on: 
      - backend

  backend: 
    build: ./backends/banuka
    environment:
      CHOKIDAR_USEPOLLING: "true"
    volumes:
      - ./backends/banuka:/app    
    ports: 
      - 8080:8083

Basically you need that chokidar environment to enable hot reloading and you need volume bindings to make your code on your machine communicate with code in container. See if this works.

Answered By: Atin Singh

Answer 2

If you are mapping your react container’s port to a different port:

    ports:
      - "30000:3000"

you may need to tell the WebSocketClient to look at the correct port:

    environment:
      - CHOKIDAR_USEPOLLING=true # create-ui-app <= 5.x
      - WATCHPACK_POLLING=true # create-ui-app >= 5.x
      - FAST_REFRESH=false
      - WDS_SOCKET_PORT=30000 # The mapped port on your host machine

See related issue:
https://github.com/facebook/create-react-app/issues/11779

Answered By: penguin egg

How to Hot-Reload in ReactJS Docker

Question:

Answers: