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

Question

I am trying to run the create-react-app's development server inside of a docker container and have it recompile and send the changed app code to the client for development purposes, but it isn't picking up the changes from inside of the docker container.
(Of course, I have the working directory of the app as a volume for the container.)
Is there a way to do make this work?

Answer 1

Actually, I found an answer here. Apparently create-react-app uses chokidar to watch file changes, and it has a flag CHOKIDAR_USEPOLLING to use polling to watch for file changes instead. So CHOKIDAR_USEPOLLING=true npm start should fix the problem. As for me, I set CHOKIDAR_USEPOLLING=true in my environment variable for the docker container and just started the container.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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