CODEWITHSUNDEEP
reactjswindowsdocker
Mostafa AGUERRAM
Mostafa AGUERRAM

Reputation: 583

Docker Create react app hot reload not working

I'm trying to set a development environment in Docker with Create React App and Node js. but when I'm changing my code,it doesn't reload changes

Normally just using volumes would be enough, but I added also : CHOKIDAR_USEPOLLING=true in ENV as create react app official documentation says, and I moved my code to WSL since I'm on Windows 10 but still the same. I created a another project with create react app and I used docker with CHOKIDAR_USEPOLLING=true and works just fine, but when I added more services won't work anymore.

this is my docker-compose file.


version: '3.3'
services:
  backend:
    image: node
    build:
      context: ./salesbackend/
    ports: 
      - 5000:3001
    env_file: ./salesbackend/.env
    volumes:
      - ./salesbackend:/var/app/salesbackend
      - /var/app/salesbackend/node_modules
    depends_on: 
      - mongo
  frontstore:
    build:
      context: ./frontstore/
    ports:
      - 5001:3000
      - 5002:3003
    env_file: ./frontstore/.env
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    volumes: 
      - ./frontstore:/var/app/frontstore
      - /var/app/frontstore/node_modules
    depends_on: 
      - backend
  frontend:
    build:
      context: ./frontend/
    ports:
      - 5003:4000
    env_file: ./frontend/.env
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    volumes: 
      - ./frontend:/var/app/frontend
      - /var/app/frontend/node_modules

  mongo:
    image: mongo
    volumes: 
      - ./db/:/data/db
    ports:
      - 30000:27017

This is my Dockerfile for frontend service,

-> Frontend and Frontstore are both made in create react app and both aren't working.

FROM node:10
WORKDIR /var/app/
COPY package.json /var/app/package.json
RUN npm install

COPY . .

CMD ["npm","start"]

using docker-compose up works just fine, when I edit my backend that is build in NestJS, changes auto reloads, but for create-react-app not.

Upvotes: 24

Views: 20468

Answers (2)

David Shen
David Shen

Reputation: 1

The marked correct answer is not going to solve this problem for EVERYONE. because simply the questioner fixes it in his own way in the Dockerfile to install the node module on this container use extra work.

The problem is the docker bind mount setting is wrong. which is why the jetpack reacts node module for not reload is not loading on the docker container.

":" means bind mount

without ":" is simply nonsense.

volumes:

  - ./frontstore:/var/app/frontstore (this is correct)

  - /var/app/frontstore/node_modules (I don't know what is the point of this, this is not bind mount, this line have no meaning. )  

  - ./youtbackendfolder/node_modules:/yourappfolder/node_modules (this will make hot reload work) don't forget rebuild image and container

Upvotes: -1

Mostafa AGUERRAM
Mostafa AGUERRAM

Reputation: 583

Fixed

This issue was in file Dockerfile The workdir was /var/app/ while in my docker-compose.yml I mounted current working directory to /var/app/frontend, I just removed that /frontend and works fine.

Upvotes: 18

Related Questions