Angular live reload and docker

[DanStockham]

I’ve already spent several hours on this issue and for the life of me, I can’t seem to figure out what why it isn’t hot reloading when changes are made.

I created an angular project from the cli as a child directory. The idea is that I’ll have multiple projects at the root level and that there will be multiple docker containers spun up at the same time

Project/
   client/
   docker-compose.yml

The client folder contains my angular project created from the cli. It has a dockerfile to build the container

// ./client/Dockerfile
FROM node:14.5.0

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@latest

COPY . /app

CMD ["ng","serve","--host","0.0.0.0", "--disableHostCheck=true", "--poll", "100"]

The docker-compose file kicks the container build at the root level

// ./docker-compose.yml

version: '3.7'

services:

  client:
    build: 
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - '.:/app/client'
      - '/app/client/node_modules'
    ports:
      - '4201:4200'

The build context needs to be set to the project folder so it can be properly bound. When I run docker-compose up command, the angular startup kicks fine. However, if I try changing a file within the client folder, nothing happens in the terminal and of course the application doesn’t get reloaded.

What’s odd is that when the docker-compose file is within the client folder and it’s kicked off, the live-reload works just fine. This is leading me to believe that this maybe docker container issue as maybe the host directory is not bound right? I’m really lost and confused here

If anyone who works with docker on a regular basis could help me here, That would be really great.

[bradtaniguchi]

So first of all, I’m not an Docker expert by any means, but I do use Angular daily.

When I was playing around with the developer experience for Angular I ran into this exact same problem. The reason your live-reload doesn’t work is because of the COPY . /app line. This copies your local files into the image when you build.

The issue with this is it is just a snapshot at that time, so when you run the container and change something Docker isn’t looking/caring about the changes you have locally anymore.

The “fix” for this is to take an approach similar to this one. Where you leverage volumes to essentially have Docker look at your local files (the ones your changing) and run them there. The above link creates a volume for a database, but I believe it might work for your code too. (again I’m going off my flaky memory so I might be wrong)

Unfortunately I can’t offer more direct help on the issue as again its been a while since I used Docker for local development. I personally found that using Docker locally for Angular development isn’t worth much of the work, as the only thing you really need is the right node version and I just use nvm for that. I still use Docker as a way to package the final builds, but using it locally for development just became more of a hassle and pain than it was worth.

Good luck, hope I helped a bit!

[DanStockham]

Well, funny enough it’s working now lol

I think I know why it wasn’t working before but this is the new docker-compose yaml

version: '3.7'

services:

  client:
    build: 
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - './client:/app/client'
      - '/app/client/node_modules'
    ports:
      - '4201:4200'

and here is the dockerfile for the angular project

FROM node:14.5.0

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

WORKDIR /app/client

ENV PATH /app/client/node_modules/.bin:$PATH

COPY package.json /app/client/package.json
RUN npm install
RUN npm install -g @angular/cli@latest

COPY . /app/client

CMD ["ng","serve","--host","0.0.0.0"]

This sorta confirms what I thought the issue was since I had to change the name of the volumes to the project name. I think this would relate to what @bradtaniguchi mentioned above where the container wouldn’t care about the local files after it being copied over to that layer.