Hot Reload with docker compose

Question

I just seeded an angular app from Project Clarity and am trying to get hot reload to work when I run it in a docker container.

If I go into the running container and edit a file, the reload works fine, but I'd like to be able to edit the files out of the container and them update in the container. Which I though would work if I set the volume but it doesn't seem to be working.

My Dockerfile....

FROM node:latest

RUN mkdir -p /usr/src/client
WORKDIR /usr/src/client

COPY package.json /usr/src/client
RUN npm install
COPY . /usr/src/client
EXPOSE 4200
CMD ["npm", "start"]

and my docker-compose.yml file...

version: '2' 

services:
  client:
    build: clarity-seed
    ports:
      - "4200:4200"
    volumes:
      - ./clarity-seed:/usr/src/client
      - /usr/src/client/node_modules

I'm using docker-compose because I'll eventually setup an express server and a mongo databbase.

Answer 1

From what I understood from this medium article: https://olshansky.medium.com/hot-reloading-with-local-docker-development-1ec5dbaa4a65

When setting up the volume, you should write it such that the files in container are directly mapped to the ones in the project directory (map outside-container files to inside-container files).

So for your case, you only have to change the first volume to fit the files locally, ie:

build: clarity-seed

ports:

  - "4200:4200"

volumes:

  - ./:/usr/src/client

  - /usr/src/client/node_modules