Docker container not hot-reloading Angular

Question

I'm configuring a dockerized Angular app but when i modify something, the page does not refresh automatically as it does on my local setup.

Based on this: Docker container doesn't reload Angular app

I should expose port 49153 but this does not work.

Here's my configuration:

Dockerfile

FROM node:14-slim
RUN npm install @angular/cli@latest -g
RUN mkdir -p /home/boilerplate
WORKDIR /home/boilerplate
EXPOSE 4200 49153
CMD ng serve --port 4200 --poll 1

docker-compose.yaml

version: "3"
services:
  app:
    image: project
    build:
      context: .
      dockerfile: font-app/Dockerfile
    volumes:
      - ./font-app:/home/boilerplate
    ports:
      - 4200:4200  #live reload server is 49153 while normal server is 4200 where changes refresh when browser refreshed
      - 49153:49153

localhost:4200 works fine, and when i do changes, and refresh it works. I have also exposed port 49153 like another stackoverflow post, but it does not work. Port 49153 has nothing in it.

Any thoughts what is wrong?

Logs:

192-168-0-243:Spring-and-springboot Jeff$ docker-compose up
Starting spring-and-springboot_app_1 ... done
Attaching to spring-and-springboot_app_1
app_1  | Your global Angular CLI version (9.1.6) is greater than your local
app_1  | version (8.3.26). The local Angular CLI version is used.
app_1  | 
app_1  | To disable this warning use "ng config -g cli.warnings.versionMismatch false".
app_1  | WARNING: This is a simple server for use in testing or debugging Angular applications
app_1  | locally. It hasn't been reviewed for security issues.
app_1  | 
app_1  | Binding this server to an open connection can result in compromising your application or
app_1  | computer. Using a different host than the one passed to the "--host" flag might result in
app_1  | websocket connection issues. You might need to use "--disableHostCheck" if that's the
app_1  | case.
app_1  | ℹ ｢wds｣: Project is running at http://0.0.0.0:4200/webpack-dev-server/
app_1  | ℹ ｢wds｣: webpack output is served from /
app_1  | ℹ ｢wds｣: 404s will fallback to //index.html
app_1  | 
app_1  | chunk {main} main.js, main.js.map (main) 51.7 kB [initial] [rendered]
app_1  | chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 270 kB [initial] [rendered]
app_1  | chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
app_1  | chunk {styles} styles.js, styles.js.map (styles) 9.69 kB [initial] [rendered]
app_1  | chunk {vendor} vendor.js, vendor.js.map (vendor) 3.91 MB [initial] [rendered]
app_1  | Date: 2020-05-14T12:24:26.717Z - Hash: d3844cd515038df15e5c - Time: 19389ms
app_1  | ** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
app_1  | ℹ ｢wdm｣: Compiled successfully.
app_1  | ℹ ｢wdm｣: Compiling...
app_1  | ℹ ｢wdm｣: wait until bundle finished: /
app_1  | ℹ ｢wdm｣: wait until bundle finished: /runtime.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /styles.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /polyfills.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /main.js
app_1  | ℹ ｢wdm｣: wait until bundle finished: /vendor.js
app_1  | 
app_1  | Date: 2020-05-14T12:29:46.595Z - Hash: 1d9ec15738fbcb9e6453
app_1  | 4 unchanged chunks
app_1  | chunk {main} main.js, main.js.map (main) 51.7 kB [initial] [rendered]
app_1  | Time: 3435ms
app_1  | ℹ ｢wdm｣: Compiled successfully.

As per your command `ng serve --port 4200`, the Angular app is served in port 4200. What do you expect to be in port 49153? — ruth, May 14 '20 at 12:40
@MichaelD https://stackoverflow.com/questions/44176922/docker-container-doesnt-reload-angular-app/44180317 based on this, i expect the live reload server to be on that port — Link, May 14 '20 at 12:54

Link · Answer 1 · 2020-05-14T19:08:44.013

0

Found the solution to this:

Changing the docker-compose.yaml to:

version: "3"
services:
  front:
    image: project
    build:
      context: ./font-app      #change is here
      dockerfile: Dockerfile
    volumes:
      - ./font-app:/home/boilerplate
    ports:
      - 4200:4200

Anyone know why changing this fixed it?

edited May 14 '20 at 19:08

answered May 14 '20 at 18:57

Link

361
5
17

Could it be possible, that changing build context triggered build of Dockerfile again, instead of using old image, and applied some changes on it? – Niklas May 14 '20 at 19:21
Because the yml file is in the dir above fontapp which is the project context. – grantwparks Nov 22 '21 at 00:33

Docker container not hot-reloading Angular

1 Answers1