Dockerized React app not recompiling code

Question

I'm trying to dockerize a basic CRA template created through npx create-react-app project-name , of which Dockerfile would look like:

FROM node:latest

WORKDIR /usr/src/client

COPY ./ ./

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

I've built the image by running docker build -t containername. and then run it with docker run -it -p 3000:3000 containername

Everything works fine, the container runs successfully and I can see the webpage running on the browser.

Problem here is webpack hot reloading not working, causing the app to not recompile upon changes.

Same question was posed already here and here but sadly with unsuccessful results. Problem seems to appear for Windows users, but in my case I'm on Mac.

I've tried already:

1. Updating npm start script with CHOKIDAR_USEPOLLING=true react-scripts start
2. Adding EXPOSE 35729 as explained here

Any suggestion is highly appreciated, thank you in advance!

Answer 1

i think webpack server doesn't see any new changes, because you modify your local file, but container uses its copies in runtime, which was passed in build time. so you should mount your local dir to container.

i can suggest you use docker-compose to mount your work dir from host to container:

docker-compose.yml

version: '3.4'
services:
  app:
    build: ./
    volumes:
      - ./src:/usr/src/client
    ports:
      - 3000:3000 # HOST:CONTAINER
    command: npm start

or maybe use -v $(pwd)/src:/app/src in run command docker run...

Answer 2

Unbelievably, the issue was caused by the working directory naming.

In order to fix it, I simply had to change it from /usr/src/client to /app and it started recompiling, even though I have no clue of the why.

FROM node:latest

WORKDIR /app

COPY ./ ./

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

Answer 3

The following worked for me.

docker run -p 3000:3000 -v ${PWD}:/usr/app -e CHOKIDAR_USEPOLLING=true globoreactapp/latest

Run that on windows poweshell.

If you are using windows cmd, you may try,

docker run -p 3000:3000 -v %cd%:/usr/app -e CHOKIDAR_USEPOLLING=true globoreactapp/latest

And if you are running on some linux distro, you can try something like this.

docker run -p 3000:3000 -v -e CHOKIDAR_USEPOLLING=true $(pwd):/usr/app 

So here specifying

-e CHOKIDAR_USEPOLLING=true

made the difference for me.

Also with docker-compose, you need to add the same environment variable. Mine looks as follows.

version: '3'
services:
  redis-server:
    image: 'redis'
  node-app:
    build: 
      context: ./globoappserver
    ports:
      - "9080:8080"     
    container_name: api-server  
  ui:
    build:
      context: ./globo-react-app-ui
    environment:
      - CHOKIDAR_USEPOLLING=true
    ports:
      - "7000:3000"
    stdin_open: true 
    volumes:
      - ./globo-react-app-ui:/usr/app

Answer 4

None of the above variants work for me.

The thing is the server is stuck. I cannot terminate it with CTRL + C as on my local machine. However, if I open a terminal of the running container and print the file I've changed I see it on the other side. For no reason server doesn't want to reload those changes.

I tried in PowerShell, GitBash, Ubuntu bash, I created a file.env and placed a snippet all suggest, I then add "-e" switch with the same line - nothing!

Though.... I didn't create my container from docker-compose.yml file. I run it manually with a command docker run -p 3000:3000 -v /app/node_modules -v ${pwd}:/app