Hot reload on React with docker-compose failing on Windows

Question

I'm trying to get React to change content of the site when it's file is being saved.

I'm using VS code which doesn't have safe write. I'm using docker-compose on Windows via Docker Desktop.

Dockerfile:

FROM node:17-alpine
WORKDIR /front

ARG FRONT_CMD
ARG API_HOSTNAME

ENV REACT_APP_API_HOSTNAME=$API_HOSTNAME

COPY . .
RUN npm i @emotion/react @emotion/styled
CMD $FRONT_CMD

relevant part of docker-compose.yml:

  frontend:
    volumes:
      - ./frontend/src:/front/src
      - /front/node_modules
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        - FRONT_CMD=${FRONT_CMD}
        - API_HOSTNAME=${API_HOSTNAME}
    env_file:
        - .env.dev
    networks:
      - internal
    environment:
        - CHOKIDAR_USEPOLLING=true
        - FAST_REFRESH=false
        - NODE_ENV=development

Everything is running behind traefik. CHOKIDAR_USEPOLLING and FAST_REFRESH seem to make no difference, I start with ' docker-compose --env-file ..env.dev up' - within the file FRONT_CMD="npm start" which behaves just fine. Env.dev should be clear indication of dev build (and is, works the same without the addition) to React, but I added NODE_ENV just be safe. I tried adding all of them into build envs just be super sure, but nothing changes. React files lay in 'frontend' folder, which is in the same location as docker-compose.yml.

Every time React says it compiled successfully and warns me that it's a development build.

Only suspicion I have left is that there's some issue with updating files with Windows locally while docker uses Linux, but I have no idea where to go from there even if that's the case.

Answer 1

Shortest way I found was to start from the other side, that is attach editor to container instead of updating container based on changes in system files. I followed the guide here: https://code.visualstudio.com/docs/remote/attach-container