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:

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

Any suggestion is highly appreciated, thank you in advance!

It should be possible to install Node and use that as a local development environment with hot reloading and other niceties; you don't need an isolation tool like Docker for this. — David Maze, Jan 22 '21 at 16:38
@DavidMaze Could you please explain what you mean by that? And why would that be the case? My idea was to have everything deployable through `AWS ECS` — ale917k, Jan 22 '21 at 17:16
You can develop using a local Node environment, package your application in Docker, and deploy it using ECS. That should all be possible using the same code base, using something like `npm run dev` as you're developing the application and only bringing Docker in when you need to run integration tests or to deploy it. — David Maze, Jan 22 '21 at 18:07

Alexey · Answer 1 · 2021-01-22T16:42:33.330

2

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 ...

edited Jan 22 '21 at 16:42

answered Jan 22 '21 at 16:23

Alexey

601
7
17

This is actually what I'm really doing, with related node, mongodb and redis services booting up as well - That works same way, but the react app doesn't recompile – ale917k Jan 22 '21 at 16:32
2

Thank you for your answer, you actually made me notice I didn't set any volume for it - I've tried with both the docker command including `-v` and a `docker-compose` set up directly inside the client root folder, but still getting it not recompiling – ale917k Jan 22 '21 at 17:19

score 0 · Accepted Answer · answered Jan 22 '21 at 18:00

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"]

score 0 · Answer 3 · answered Oct 01 '21 at 08:38

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

Dockerized React app not recompiling code

3 Answers3