CODEWITHSUNDEEP
reactjsdocker
ale917k
ale917k

Reputation: 1768

Dockerized React app not recompiling code

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!

Upvotes: 0

Views: 4784

Answers (3)

VivekDev
VivekDev

Reputation: 25349

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

Upvotes: 0

ale917k
ale917k

Reputation: 1768

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

Upvotes: 0

Alexey
Alexey

Reputation: 601

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

Upvotes: 2

Related Questions