Cant get webpack hotreload with create-react-app and docker windows

Question

We are going to develop a react pwa with dockersetup and to publish the app on gitlab pages during deployment to master branch.

I work on a windows device and cant get the feature of hotreloading in dev-mode. Whenever i make some change, the code isnt recompiling. I have to docker-compose up --build every single time for every change.

Is there any possible way to get hotreloading working on a windows/docker/create-react-app setup?

Following the package.json:

 {
  "name": "Appname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "buildandserver": "react-scripts build && serve -s build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Now the Dockerfile for Dev-Setup:

FROM node:9.6.1
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install [email protected] -g
# start app
CMD ["npm", "start"]

And at least the docker-compose for dev-setup:

version: '3.5'

services:

  App-Name:
    container_name: App-Name
    build:
      context: .
      dockerfile: devsetup/Dockerfile
    volumes:
      - './:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

Im running docker for windows on the device. I hope anyone can help me out of here...Thanks!

Answer 1

The problem is mainly caused by the fact you're on Windows.

Why?

Because Docker on Windows does not work well with volumes. To be more precise - it does not notify the container about the volume change. It does expose up to date files in container but the Linux inside the container "doesn't know" about the fact that file has been changed which is required to trigger webpack recompilation.

There is few solutions:

1. Switch to Linux for development (I know it may be not possible but if you are working with docker a lot and you can move - do that. Linux containers on Linux work much faster, no issues with volumes etc)
2. If you can't you can either use legacy polling in weback which is already mentioned in comments
3. You can use e.g. https://github.com/merofeev/docker-windows-volume-watcher which is Python based tool which watch your local files and container files inside the volumes and notify the container about the change...

I found 3 working a bit better than 2 but both will have some performance sacrifice.

I hope it helps. If you have any questions just comment and I will try to edit to explain better.