Running development server with create-react-app inside of a docker container

Polling, suggested in the other answer, will cause much higher CPU usage and drain your battery quickly. You should not need CHOKIDAR_USEPOLLING=true since file system events should be propagated to the container. Since recently this should work even if your host machine runs Windows: https://docs.docker.com/docker-for-windows/release-notes/#docker-desktop-community-2200 (search for "inotify").

However, when using Docker for Mac, this mechanism seems to be failing sometimes: https://github.com/docker/for-mac/issues/2417#issuecomment-462432314

Restarting the Docker daemon helps in my case.

With react-script v5.0.0 onward the command is WATCHPACK_POLLING=true instead of CHOKIDAR_USEPOLLING=true

Clear Answer for react-script v5.0.0 onward

1- Create a .env file in the root directory of the project

2- Add the WATCHPACK_POLLING=true to the .env file

3- build new image

4- run new container

5- verify that the changes being detected.

Or you can just add WATCHPACK_POLLING=true to your script for making the container like this

docker run --name my-app -it --rm -v $(pwd)/src:/app/src -p 3000:3000 -e WATCHPACK_POLLING=true myapp

If your changes are not being picked up, it is probably a problem with the file watching mechanism. A workaround for this issue is to configure polling. You can do that globally as explained by @Javascriptonian, but you can do this also locally via the webpack configuration. This has the benefit of specifying ignored folders (e.g. node_modules) which slow down the watching process (and lead to high CPU usage) when using polling.

In your webpack configuration, add the following configuration:

devServer: {
  watchOptions: {
    poll: true, // or use an integer for a check every x milliseconds, e.g. poll: 1000
    ignored: /node_modules/ // otherwise it takes a lot of time to refresh
  }
}

source: documentation webpack watchOptions

If you are having the same issue with nodemon in a back-end Node.js project, you can use the --legacy-watch flag (short -L) which starts polling too.

npm exec nodemon -- --legacy-watch --watch src src/main.js

or in package.json:

"scripts": {
  "serve": "nodemon --legacy-watch --watch src src/main.js"
}

documentation: nodemon legacy watch

If you use linux then you don't need to use CHOKIDAR_USEPOLLING=true

In my case, I was running the docker run command in a Git bash command line (on Windows) and the hot reloading was not working. Using react-script v5.0.0, setting WATCHPACK_POLLING=true in the .env file and running the docker run command in PowerShell worked.

docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 3000:3000 -e CHOKIDAR_USEPOLLING=true myapp

I had to debug my source with different node versions and various options mentioned above but none worked unfortunately, however the only solution was to properly map the container to host source and use the WORKDIR of the Dockerfile in the docker-compose.json file.

Dockerfile

### EBMBOOK'S SINGLE STAGE NODE VERSION 
FROM node:18.13-alpine

# Create a Virtual directory inside the docker image
WORKDIR /app

# install app dependencies - install will only be triggered if there are new changes in the package.*json files
COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json
RUN npm install

# copy app too
COPY ./ /app

EXPOSE 3000

# Deploy app for local development
CMD [ "npm", "start" ]

And, in the docker-compose.json link back the source to WORKDIR and of course don't forget the environment WATCHPACK_POLLING=true either.

docker-compose.json

services:
  # frontend
  frontend:
    container_name: central.ebmbook
    restart: always
    build:
      dockerfile: Dockerfile.dev
      context: ../../frontend
    volumes:
      - ../../frontend/src:/app/src
      - /app/node_modules
    environment:
      - WDS_SOCKET_HOST=127.0.0.1 
      - WATCHPACK_POLLING=true 
    networks:
      - public
    ports:
      - 3000:3000
      
    ....