Angular in docker compose does not reload changes

Question

I am new to docker and I am trying to make an aplication using django-rest and angular. My current docker-compose file looks like this:

version: '3'

services:
  db:
    image: postgres
    environment:
      - POSTGRES_DB=pirate
      - POSTGRES_USER=django
      - POSTGRES_PASSWORD=secreat
    volumes:
      - db-data:/var/lib/postgresql/data
    ports:
      - "5432:5432"
  backend:
    entrypoint: /entrypoint.sh
    build: ./backend
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db
    healthcheck:
        test: [“CMD”, “curl”, “--fail”, 'http://localhost:8000']
        interval: 10s
        timeout: 5s
        retries: 3
  frontend:
    build: ./frontend
    volumes:
      - .:/app
    healthcheck:
        test: [“CMD”, “curl”, “--fail”, 'http://localhost:4200']
        interval: 10s
        timeout: 5s
        retries: 3
    ports:
      - "4200:4200"
  nginx:
    build: ./nginx
    healthcheck:
        test: [“CMD”, “curl”, “--fail”, 'http://localhost']
        interval: 10s
        timeout: 5s
        retries: 3
    ports:
      - "80:80"
    links:
      - frontend
volumes:
  db-data:

And this is my angular Dockerfile:

FROM node:8.6
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install

# Here starts angular cli workaround
USER node
RUN mkdir /home/node/.npm-global
ENV PATH=/home/node/.npm-global/bin:$PATH
ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
RUN npm install -g @angular/cli
# Here ends 

COPY . /usr/src/app
CMD ["npm", "start"]

And now this is the problem: Whenever I change sth in my angular code the docker image with angular does not reload changes. I dont know what I am doing wrong.

Answer 1

THe problem is related to how the filesystem works in Docker. To fix this I suggest you to either perform hot reloads (you have add EXPOSE 49153 in Dockerfile and ports - '49153:49153' in docker-compose.yml)

There are other solution like inotify or nodemon but they require that you use the --poll option when you start your application. The problem is that they keep polling the fs for changes and if the application is big your machine will be a lot slower than you'd like.

---

I think I found the issue. You copy the ./app in /usr/src/app but you're setting .:/app as a volume. So this means that if you get in your docker instance you'll find your application in 2 places: /app and /usr/src/app.

To fix this you should have this mapping: .:/usr/src/app

Btw, you're going to use the node_modules from your host and this might create some issues. To avoid this you can add an empty volume mapping: /usr/src/app/node_modules

---

If you get inside your running container, you'll find that the folder app exists twice. You can try it, by executing:

docker exec -it $instanceName /bin/sh
ls /app
ls /usr/src/app

The problem is that only the content of /app changes during your coding, while your application is currently executing the content of /usr/src/app which remains always the same.

Your frontend in the docker-compose should look like this:

frontend:
    build: ./frontend
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

Answer 2

I came across the same issue in Docker Desktop for Windows. I know it has been a while but, anybody came here looking for a answer like me, you should do these steps.

Modify start command to "start": "ng serve --host 0.0.0.0 --poll 500" on scripts section in package.json. (Here the number 500 means that client will check every 500 milliseconds whether a change has been made, you can reduce this number. Refer this)

Make sure port 49153 is exposed in Dockerfile (use correct node version)

FROM node:10.16.3-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 4200 49153
CMD npm run start

Map ports and volumes in docker-compose.yml

version: "3.7"
services:
  webapp:
    build: .
    ports:
      - "4200:4200"
      - "49153:49153"
    volumes:
      - "/app/node_modules"
      - ".:/app"

After that running docker-compose up will build an image and spin up a new container which will automatically reload with new changes.