reactjs - Dockerized React app not recompiling code

Question

I'm trying to dockerize a basic CRA template created through npx create-react-app project-name, of which Dockerfile would look like:

FROM node:latest

WORKDIR /usr/src/client

COPY ./ ./

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

I've built the image by running docker build -t containername . and then run it with docker run -it -p 3000:3000 containername

Everything works fine, the container runs successfully and I can see the webpage running on the browser.

Problem here is webpack hot reloading not working, causing the app to not recompile upon changes.

Same question was posed already here and here but sadly with unsuccessful results. Problem seems to appear for Windows users, but in my case I'm on Mac.

I've tried already:

1. Updating npm start script with CHOKIDAR_USEPOLLING=true react-scripts start
2. Adding EXPOSE 35729 as explained here

Any suggestion is highly appreciated, thank you in advance!

question from:https://stackoverflow.com/questions/65848833/dockerized-react-app-not-recompiling-code

Answer 1

i think webpack server doesn't see any new changes, because you modify your local file, but container uses its copies in runtime, which was passed in build time. so you should mount your local dir to container.

i can suggest you use docker-compose to mount your work dir from host to container:

docker-compose.yml

version: '3.4'
services:
  app:
    build: ./
    volumes:
      - ./src:/usr/src/client
    ports:
      - 3000:3000 # HOST:CONTAINER
    command: npm start

or maybe use -v $(pwd)/src:/app/src in run command docker run ...