Dockerized React app not recompiling code - reactjs

Question

I'm trying to dockerize a basic CRA template created through npx create-react-app project-name, of which Dockerfile would look like:
FROM node:latest
WORKDIR /usr/src/client
COPY ./ ./
RUN npm install
EXPOSE 3000
CMD ["npm", "start"]
I've built the image by running docker build -t containername .
and then run it with docker run -it -p 3000:3000 containername
Everything works fine, the container runs successfully and I can see the webpage running on the browser.
Problem here is webpack hot reloading not working, causing the app to not recompile upon changes.
Same question was posed already here and here but sadly with unsuccessful results. Problem seems to appear for Windows users, but in my case I'm on Mac.
I've tried already:
Updating npm start script with CHOKIDAR_USEPOLLING=true react-scripts start
Adding EXPOSE 35729 as explained here
Any suggestion is highly appreciated, thank you in advance!

Answer 1

i think webpack server doesn't see any new changes, because you modify your local file, but container uses its copies in runtime, which was passed in build time. so you should mount your local dir to container.
i can suggest you use docker-compose to mount your work dir from host to container:
docker-compose.yml
version: '3.4'
services:
app:
build: ./
volumes:
- ./src:/usr/src/client
ports:
- 3000:3000 # HOST:CONTAINER
command: npm start
or maybe use -v $(pwd)/src:/app/src in run command docker run ...

Answer 2

Unbelievably, the issue was caused by the working directory naming.
In order to fix it, I simply had to change it from /usr/src/client to /app and it started recompiling, even though I have no clue of the why.
FROM node:latest
WORKDIR /app
COPY ./ ./
RUN npm install
EXPOSE 3000
CMD ["npm", "start"]

Answer 3

The following worked for me.
docker run -p 3000:3000 -v ${PWD}:/usr/app -e CHOKIDAR_USEPOLLING=true globoreactapp/latest
Run that on windows poweshell.
If you are using windows cmd, you may try,
docker run -p 3000:3000 -v %cd%:/usr/app -e CHOKIDAR_USEPOLLING=true globoreactapp/latest
And if you are running on some linux distro, you can try something like this.
docker run -p 3000:3000 -v -e CHOKIDAR_USEPOLLING=true $(pwd):/usr/app
So here specifying
-e CHOKIDAR_USEPOLLING=true
made the difference for me.
Also with docker-compose, you need to add the same environment variable. Mine looks as follows.
version: '3'
services:
redis-server:
image: 'redis'
node-app:
build:
context: ./globoappserver
ports:
- "9080:8080"
container_name: api-server
ui:
build:
context: ./globo-react-app-ui
environment:
- CHOKIDAR_USEPOLLING=true
ports:
- "7000:3000"
stdin_open: true
volumes:
- ./globo-react-app-ui:/usr/app