I'm creating a React app with docker in WSL2 and create-react-app and everything seems to be working fine except the app is not updating with changes in the code. I mean, when I make a change in the code, the browser should update the changes automatically, but it doesn't and I have to restart the container to see them. I added CHOKIDAR_USEPOLLING=true
in ENV
but it's not working either. These are the configuration files:
dockerfile
# pull official base image
FROM node:16.13.1
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install
# add app
COPY . ./
# start app
CMD ["npm", "start"]
docker-compose.yml
services:
react:
build: ./frontend
command: npm start
ports:
- 3000:3000
volumes:
- ./frontend:/app
env_file:
- 'env.react'
env.react
CHOKIDAR_USEPOLLING=true
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"mdbreact": "^5.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-painter": "^0.4.0",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sass": "^1.45.1",
"web-vitals": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Can you see what I'm doing wrong? Thanks!