React Webpack not rebuilding when edited file outside docker container (on mac)

Question

I've used create-react-app to create a react app inside a docker container. When I edit App.js inside the container, the app automatically gets rebuilt and the browser reloads. But when I edit a file outside the container (on the host) it doesn't get rebuilt.

Is this is a webpack/watch problem - but maybe also has something to do with running docker on a mac? Any help would be appreciated.

I assume this sort of thing is quite normal for a developer setup (ie - using docker to create your build environment but using a mount for the actual code).

Here is a Github repo with what I'm using.

Answer 1

In my case enabling this environment variable resolved it:

CHOKIDAR_USEPOLLING=true

Just this setting, no installation was necessary. The Chokidar docs state that it helps to watch files over a network. As it seems, this also can be helpful for docker volumes.

PS: The CPU load was quite high, so I sadly also had to reduce the interval of checks by setting CHOKIDAR_INTERVAL=1000.

---

You can set this variable in the docker-compose.yml file …

    environment:
      - CHOKIDAR_USEPOLLING=true

… or in a Dockerfile …

ENV CHOKIDAR_USEPOLLING=true

… or via command line by something like:

docker run -e CHOKIDAR_USEPOLLING=true my-app

Answer 2

I figured it out myself. It was webpack configuration that was prevented an edit from outside the container to trigger a rebuild and restart. The trick being (and apparently this is a legacy option)

watchOptions {
  poll: 100
}

NOTE: using poll:1000 resulted in it only refreshing every other edit. Using 100 works every edit. not sure why.

So for my backend API I am running node/expressjs. Here I needed to install and run webpack and nodemon. (nodemon needed the -L option to work while editing outside of the container).

My frontend is created using create-react-app where none of the webpack configuration is exposed. I had to run

npm run eject

to expose the webpack configuration (which I edited the config/webpackDevServer.config.js file).

Now, using eject is frowned upon because "you can't go back"...but since I'm using a docker container and using create-react-app/eject when I build the container - I have effectively saved myself from this undesirable situation. (although I may have to fix my docker file if anything changes on me).

All these edits can be found in my docker files here https://github.com/roocell/fullstack_react_nodejs_in_docker

Answer 3

You should link your host's folder containing your application files to the container using Volumes. Even better would be to use Docker-Compose since you're using multiple containers.

Docker containers are purely meant to run code, not edit it. You really shouldn't be using an editor inside of a container.

I do think however that your current application structure is incorrect. Your API should provide data that your frontend retrieves and displays. Currently your backend code only functions as a router for your frontend application, but instead you should use a client-side router and build a RESTFUL JSON-sending API. Then from your clientside javascript you can do fetch calls to your API, which should res.send some JSON.