CODEWITHSUNDEEP
reactjsdockerdocker-compose
JAN
JAN

Reputation: 21855

React App doesn't refresh on changes using Docker-Compose

Consider the Docker compose

version: '3'
services:
  frontend:
    build:
      context: ./frontend
    container_name: frontend
    command: npm start
    stdin_open: true
    tty: true
    volumes:
      - ./frontend:/usr/app
    ports:
      - "3000:3000"

  backend:
    build:
      context: ./backend
    container_name: backend
    command: npm start
    environment:
      - PORT=3001
      - MONGO_URL=mongodb://api_mongo:27017
    volumes:
      - ./backend/src:/usr/app/src
    ports:
      - "3001:3001"

  api_mongo:
    image: mongo:latest
    container_name: api_mongo
    volumes:
      - mongodb_api:/data/db
    ports:
      - "27017:27017"
      
volumes: 
    mongodb_api:

And the React Dockerfile :

FROM node:14.10.1-alpine3.12

WORKDIR /usr/app

COPY package.json .

RUN npm i

COPY . .

Folder Structure : -frontend -backend -docker-compose.yml

And inside Frontend :

enter image description here

And inside src :

enter image description here

When I change files inside src it doesn't reflect on the Docker side.

How can we fix this ?

Upvotes: 1

Views: 2307

Answers (2)

JAN
JAN

Reputation: 21855

Here is the answer :

If you are running on Windows, please read this: Create-React-App has some issues detecting when files get changed on Windows based machines. To fix this, please do the following:

  1. In the root project directory, create a file called .env

  2. Add the following text to the file and save it: CHOKIDAR_USEPOLLING=true

  3. That's all!

Upvotes: 2

Rahul Verma
Rahul Verma

Reputation: 1

Don't use same name dir for different services like you use /usr/app change this to /client/app for client and server/app for backend and then it all works and use environment:- CHOKIDAR_USEPOLLING=true and use FROM node:16.5.0-alpine and can use stdin_open: true

Upvotes: 0

Related Questions