23

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?

hwkd
  • 2,411
  • 3
  • 18
  • 27
  • If you are launching with something like `docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 3001:3000 -e CHOKIDAR_USEPOLLING=true sample:dev` make sure you use powershell and that the variable interpolation works ( the part with ${} ). I was working with git bash and it was creating some weird folder and the react live reload was not working. Switching to powershell fixed the issues. – Mindaugas Bernatavičius Nov 30 '20 at 18:28

7 Answers7

49

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.

hwkd
  • 2,411
  • 3
  • 18
  • 27
  • 4
    This fixes but there is a significant delay for hot reloading and my cpu usage was above 60% – Azraar Azward Nov 11 '18 at 08:20
  • 1
    Yes I agree it isn't the optimal solution. Please post an answer if you've found a better solution. – hwkd Jan 10 '19 at 20:24
  • 1
    See the answer I just added. – Juliusz Gonera Jan 29 '20 at 22:19
  • Creating a `.env` file with `CHOKIDAR_USEPOLLING=true` worked for me (see https://stackoverflow.com/a/43281575/470749 and https://create-react-app.dev/docs/troubleshooting/ and https://stackoverflow.com/a/57691204/470749 ) – Ryan Apr 10 '20 at 00:03
  • You can configure webpack to use polling and ignore the `node_modules` while watching. This solves the CPU problem. See the answer for Vue (should be similar for React): https://stackoverflow.com/a/67209565/3233827 – ssc-hrep3 Apr 22 '21 at 09:08
  • CHOKIDAR_USEPOLLING was not working for me, but adding "WATCHPACK_POLLING=true" as environment in my nodejs-instance in docker-compose, helping me, and hot reload works for me, now I don't even have to reload the website, content refreshing automaticle after edit and saving file. – b166er Jan 03 '23 at 17:02
10

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.

Juliusz Gonera
  • 4,658
  • 5
  • 32
  • 35
4

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

Abdul Rehman
  • 1,662
  • 3
  • 22
  • 36
  • I am using react-script v5.0.1 on a dockerized react app and when I go with your solution webpack compiles successfully but browser staying still. After compilation I must refresh browser. How can I solve this issue? PS: When I use CHOKIDAR_USEPOLLING browser refreshes but changes are not compiled before it. – Necip Asım ARSLAN Jan 23 '23 at 15:05
2

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

ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
1

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

Nasser Ali Karimi
  • 4,462
  • 6
  • 34
  • 77
  • I am using react-script v5.0.1 on a dockerized react app and when I go with your solution webpack compiles successfully but browser staying still. After compilation I must refresh browser. How can I solve this issue? PS: When I use CHOKIDAR_USEPOLLING browser refreshes but changes are not compiled before it. – Necip Asım ARSLAN Jan 23 '23 at 15:04
0

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

Sakil Mahmud
  • 119
  • 1
  • 3
0

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

Phil
  • 19
  • 3