Create-react-app server not recompiling when data changes inside docker container

Question

I'm currently trying to run a React application inside docker. I'm running the scripts included in the create-react-app package running npm start inside the container and I'm using bind mounts to work in the host and reflect changes in the container. Sadly, the recompile feature that comes with the react package is not working inside the container even though the files do change. The catch is that I'm using docket toolbox. Do you guys know what could be the problem? Why isn't it recompiling?

My file structure is the following.

project
|   .dockerignore
|   .gitignore
|   docker-compose.yml
|   Dockerfile
|   LICENSE
|   README.md
|
\---frontend
    +---nodemodules\*
    |   package-lock.json
    |   package.json
    |   README.md
    |
    +---public
    |       index.html
    |
    \---src
        |   index.js
        |
        \---container
                App.jsx

Dockerfile

FROM node:8.11.1

COPY . /usr/src/

WORKDIR /usr/src/frontend

ENV PATH /usr/src/frontend/node_modules/.bin:$PATH

RUN npm install -g create-react-app
RUN npm install

EXPOSE 3000

CMD [ "npm", "start" ]

docker-compose.yml

version: "3.5"

services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - "./frontend:/usr/src/frontend"
      - '/usr/src/frontend/node_modules'
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development

Veteran

delete the image and re run again. – Prostyle

@JinnaBalu sadly that doesn't work,,, – Veteran

RUN npm install -g create-react-app, why is this step required. I am changing the docker file and docker-compose costomising for you from nodejs.org/en/docs/guides/nodejs-docker-webapp – Prostyle

Answer 1

Sometimes React does not recompile the code upon changing files when app is running inside the container.

If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM. See documentation for details.

Ruysdael

for description please visit the link create-react-app.dev/docs/… – Ruysdael

Polling 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: docs.docker.com/docker-for-windows/release-notes/… (search for "inotify"). However, when using Docker for Mac, this mechanism seems to be failing sometimes: github.com/docker/for-mac/issues/2417#issuecomment-462432314. Restarting the Docker daemon helps in my case. – Technical

As of react-scripts version 5.x.x you need to use WATCHPACK_POLLING=true instead of CHOKIDAR_USEPOLLING – Laicize

Answer 2

Change your tree as

project
|   .dockerignore
|   .gitignore
|   docker-compose.yml
|   LICENSE
|   README.md
|
\---frontend
    +---nodemodules\*
    |   package-lock.json
    |   package.json
    |   README.md
    |   Dockerfile    
    |
    +---public
    |       index.html
    |
    \---src
        |   index.js
        |
        \---container
                App.jsx

Dockerfile

FROM node:node:8.11.1
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 3000
CMD [ "npm", "start" ]

Build image, this step you need to do on every chnage

cd frontend/

docker build -t reactapp .

docker-compose.yml

version: "3.5"
services:
  react:
     image: reactapp
     ports:
       - "3000:3000"

Prostyle

I install the create-app because it automatically install the latest version of react-scripts and when I copy the frontend folder into the container it also copies the json packages so I got that covered. Also will docker-compse up --build I builded the new image with no results. – Veteran

npm packages are installed with the command npm install. you don't need to copy node_modules – Prostyle

True, sorry I didn't put it in the question but the dockerignore file ignores the modules. – Veteran