Docker container doesn't reload Angular app

Question

I have some issue with ng serve in my docker container running by docker-compose.

Dockerfile

FROM node:7.1

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app

EXPOSE 4200

CMD [ "npm", "start" ]'

And my docker-compose.yml

web:
    build: .
    ports:
        - '8089:4200'
    volumes:
        - .:/usr/src/app/
    environment:
        - NODE_ENV=dev
    command: bash -c "npm start"

Everything works great when I run it but the editing file does not rise reload of application. File is changed, I'm sure because I check it by ssh connection and the file in the container is edited. When container is restarted again every change is applied. I thought when I switch with building image by only docker to compose this will disappearr, but do not.

When I call touch some file from docker exec webpack reload all file and it work without restarting container.

Someone have solution?

Answer 1

I found solution for both problems:

1. inotify -> just edit package.json in "scripts" section this line: "start": "ng serve --host 0.0.0.0 --poll", required only for Windows host,

2. hot reload -> add expose 49153 in Dockerfile and ports - '49153:49153' in docker-compose.yml like @kstromeiraos mentioned.

Answer 2

Webpack uses a port to do live reload of the application. That port is 49153 by default.

You have to expose and bind that port in the container to the host port and that should solve your problem.

So, add this to your Dockerfile.

FROM node:7.1

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
RUN npm install -g angular-cli
COPY . /usr/src/app

EXPOSE 4200 49153

CMD [ "npm", "start" ]'

And this to your docker-compose.yml.

web:
    build: .
    ports:
        - '8089:4200'
        - '49153:49153'
    volumes:
        - .:/usr/src/app/
    environment:
        - NODE_ENV=dev
    command: bash -c "npm start"

Answer 3

My solution using node:slim.

No need for copying data into containers. Just use volumes.

Dockerfile:

NOTE: --poll 1

FROM node:slim

RUN npm install @angular/cli@latest -g

RUN mkdir -p /home/boilerplate

WORKDIR /home/boilerplate

EXPOSE 4200

CMD ng serve --port 4200 --host 0.0.0.0 --poll 1

Compose:

  project:
    image: project
    build:
      context: .
      dockerfile: projectdir/Dockerfile
    volumes:
    - ./projectdir:/home/boilerplate
    ports:
    - 4200:4200