4

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 react-scripts@1.1.1 -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!

Alex
  • 132
  • 1
  • 4
  • 21
  • You should add `command` to your `docker-compose` under `App-Name` service so that every time the docker starts, you have the `npm start` running. `npm start` is the one who starts the dev server and waits for changes to happen. so you have to do `docker-compose up` once and done. – Panther Dec 27 '18 at 01:32
  • i added `command: "npm start"` right under `container_name: App-Name` but its still not compiling when i change something. Im also a newbie in docker/docker-compose. We are a projektgroup and i didnt setup the docker stuff. The one who did it, is working with mac/linux :) – Alex Dec 27 '18 at 01:44
  • I also had this kind of issue with a angularcli dockerproject. To solve that, i used `dockerstart": "npm install; ng serve --host 0.0.0.0 --poll=1000` in my package.json file. Maybe there is a similar solution to my react problem – Alex Dec 27 '18 at 01:57
  • Looks like the culprit is that `file change events are not getting notified inside the docker` so that the `devserver` never knows when to recompile. Try adding `poll: true` to your `webpack config` as described in https://webpack.js.org/configuration/watch/. That might help you. Also keep the `npm start` command in `docker-compse` so that you don't have to build the container everytime. – Panther Dec 27 '18 at 02:22
  • with the dockerfile my whole node_modules is only mounted in dockerenvironment, i dont have local access to it with my setup. Do you have any idea how i can modify the webpack config then, cause they is in the node_modules folder? – Alex Dec 27 '18 at 11:00
  • 2
    Fixed it by modifing the startscript in package.json by `"start": "CHOKIDAR_USEPOLLING=true react-scripts start",` – Alex Dec 27 '18 at 12:56
  • This worked for me https://frontendguruji.com/blog/how-to-create-react-app-in-docker-container/#Hot-Reloading-not-working – Mandeep Pasbola Jun 24 '22 at 18:45

1 Answers1

8

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.

Aakash
  • 21,375
  • 7
  • 100
  • 81
Marek Urbanowicz
  • 12,659
  • 16
  • 62
  • 87
  • Since recently file system events 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"). – Juliusz Gonera Jan 29 '20 at 22:25