Docker compose volume binding doesn't work on windows

Question

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.

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.

If you're trying to run a React application, based only on code on the host system and not based on anything in an image, do you need Docker; or would it be enough to install Node and use an ordinary non-container workflow? (You could docker compose up -d backend to get a containerized backend.) — David Maze
– David Maze, Commented Jun 26, 2024 at 13:25
@DavidMaze it is just a test project to learn docker. Not a real project. I followed the tutor's instructions. it is working on his Mac OS, but It is not working for me on Windows. — Behnam
– Behnam, Commented Jun 26, 2024 at 16:09

CodeWizard · Accepted Answer · 2024-06-26 12:36:35Z

1

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

answered Jun 26, 2024 at 12:36

CodeWizard

146k22 gold badges162 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Behnam Over a year ago

volumes: - ${PWD}/frontend/src:/app/src I couldn't run the app using this command i.ibb.co/ZNpmdM1/Screenshot-2024-06-26-161830.png

CodeWizard Over a year ago

Right, you are on windows it might not work, Try to use folder outside the ./frontend and copy the code of course see if its working

Behnam · Accepted Answer · 2024-07-03 10:18:25Z

0

Adding these 3 configs fixed the hot reloading issue:

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

answered Jul 3, 2024 at 10:18

Behnam

1,0833 gold badges14 silver badges39 bronze badges

Comments

Mega Aleksandar · Accepted Answer · 2024-07-03 21:06:17Z

Recommend that you double/tripple check if you are actually editing files in the Linux subsystem. You can check for it in Visual Studio Code on the bottom left, there should be an icon that enables you to connect to the WSL.

On top of that, expanding on the comment @CodeWizard, my usual docker setup is

main project directory
->docker-compose.yml
->backend-container/Dockerfile //this file is used to build the image for the backend
->frontend-container/Dockerfile //this file is used to build the image for the frontend
->src

With this structure, and double checking the WSL, you mount the /src directory to both containers if needed and then both containers modify the volume and will reflect the changes.

As for the hot module reload, you might not need the environment variables if you launch docker from WSL. I had a similar issue with Vite and its HMR and after I figured out the WSL part, I only needed to change the server and host parameters in Vite config to match the webserver that was in one of the containers. By default, Vite will run HMR with npm run dev and listen to 5173 port.

Collectives™ on Stack Overflow

Docker compose volume binding doesn't work on windows

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related