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

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

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 herehttps://github.com/roocell/fullstack_react_nodejs_in_docker

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.