Dockerized react app doesnt hot reload on code change

Question

I want to start developing my React apps with docker, to get familiar with this tool but I am facing some crazy issues. I have seen a lot of tutorials on how to dockerize react app. I have followed all steps presented in that tutorials at some point the guy from the tutorial was doing the hot reload with docker on react app. And for me that doesn't work, I have seen the page for which I have created the container. So for me, the container wasn't updating and the tutorial guy does.

Because I have followed a lot of tutorials and articles about this topic and nothing has helped me I tried to get some pre-made template to figure it out. So I have cloned a repo with one of these templates. To my surprise, I am still facing the issue that I cant make a live reload.

This is the repo I cloned: https://github.com/rsandagon/docker-react-app-template

Now my file looks like this

Dockerfile

#base image
FROM node:9.6.1

#set working directory
RUN  mkdir /usr/src/app
WORKDIR usr/src/app

#add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

#install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-script@1.1.1 -g --silent

#start app
CMD ["npm", "start"]

Docker-compose.yml file:

version: '3.5'

services:

  docker-react-app-template:
    container_name: docker-react-app-template
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

I have used these two commands:

docker-compose up -d --build
docker-compose start

First to create the image, second to run the container. After these, I have still a page that doesn't hot reload when the App.js file changes.

Can somebody tell me what I am doing wrong? I am lost. TY

Answer 1

If you are using WSL2 as a backend for Docker Desktop, the project must be created on or copied directly to the Linux file system. If the project is on the Windows file system, the volumes will not work correctly. All docker commands should be run within WSL2 and not on Windows.

1. To open your WSL2 type wsl in the Search Bar.
2. When the WSL terminal launches, change into the WSL user directory by running the cd ~ command . Verify that you are in the correct location by running pwd. This should now printout /home/USERNAME . If it still shows /mnt/c/WINDOWS/system32 , you are in the wrong location.
3. Run explorer.exe . to open up the file explorer.
4. Move your project directory into the WSL file browser window.
5. Delete any node_modules or package-lock.json files that may exist in the project directory. If these were generated on the Windows file system and were copied over, they will conflict.
6. Using the WSL2 terminal build your Docker image as you typically would.