Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Docker compose volume binding doesn't work on windows

I have created the below docker-compose file in my app:

version: '3.9'
services: 
  MongoDB: 
    ...
  backend: 
    ...
  frontend:
    stdin_open: true
    tty: true
    build: ./frontend
    image: frontend-image
    container_name: frontend-container
    ports: 
      - 3000:3000
    volumes: 
      - ./frontend/src:/app/src
    depends_on: 
      - backend
volumes: 
  mongodbdata:

I work on windows 11 and The frontend app is a react app. I have also enabled "Use the WSL 2 based engine" option in the docker desktop settings.
The issue is after running the container, when I change something in /frontend/src/App.js I can’t see the changes applied until I stop docker-compose and run docker-compose up again.

I can see that my changes are applied in the file tab of the container in docker desktop but it seems that hot reloading doesn’t work.

enter image description here

More information:

  • The problem is not just about the frontend. I have the same issue in the backend as well. when I change a console.log it still prints the old statement until I restart the docker-compose. I can see in the doceker files that the changes are transferred to the container files but they are not effective.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adding these 3 configs fixed the hot reloading issue:

    environment:
  - WDS_SOCKET_HOST=127.0.0.1 
  - CHOKIDAR_USEPOLLING=true
  - WATCHPACK_POLLING=true

  2. 0

    You placed the

    volumes: 
      - ./frontend/src:/app/src

    Inside your build folder.
    Try to remove it outside or use ${PWD}:

    volumes: 
      - ${PWD}/frontend/src:/app/src
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search