I am trying to set up React with docker, but for some reason I cannot get the hot reload to work. Currently, if I create a file it recompiles, but if I change something in a file it does not. Also, I didn't change any packages or configuration files, the project was generated with npx create-react-app projectname --template typescript.
From researching this online I found out that I needed to add CHOKIDAR_USEPOLLING=true to a .env file, I tried this but it didn't work, I tried placing the .env in all directories in case I placed it in the wrong one. I also added it to the docker-compose.yml environment.
In addition to this, I also tried downgrading react-scripts to 4.0.3 because I found this, that also didn't work.
I also tried changing a file locally and then checking if it also changes inside the docker container, it does, so I'm pretty sure my docker related files are correct.
Versions
Directory structure
project/
│ README.md
│ docker-compose.yml
│
└───frontend/
│ Dockerfile
│ package.json
│ src/
│ ...
Dockerfile
FROM node:16.14-alpine3.14
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm install
CMD ["npm", "start"]
docker-compose.yml
services:
frontend:
build: ./frontend
ports:
- "3000:3000"
volumes:
- "./frontend:/app"
- "/app/node_modules"
environment:
CHOKIDAR_USEPOLLING: "true"
The Dockerfile you have is great for when you want to package your app into a container, ready for deployment. It's not so good for development where you want to have the source outside the container and have the running container react to changes in the source.
What I do is keep the Dockerfile for packaging the app and only build that, when I'm done.
When developing, I can often do that without a dockerfile at all, just by running a container and mapping my source code into it.
For instance, here's a command I use to run a node app
docker run -u=1000:1000 -v $(pwd):/app -w=/app -d -p 3000:3000 --rm --name=nodedev node bash -c "npm install && npm run dev"
As you can see, it just runs a standard node image. Let me go through the different parts of the command:
-u 1000:1000 1000 is my UID and GID on the host. By running the container using the same ids, any files created by the container will be owned by me on the host.
-v $(pwd):/app map the current directory into the /app directory in the container
-w /app set the working directory in the container to /app
-d run detached
-p 3000:3000 map port 3000 in the container to 3000 on the host
--rm remove the container when it exits
-name=nodedev give it a name, so I can kill it without looking up the name
at the end there's a command for the container bash -c "npm install && npm run dev" which starts by installing any dependencies and then runs the dev script in the package.json file. That script starts up node in a mode, where it hot reloads.