1

I'm tying to run an Angular app via Docker for development. I want the app to live-reload in the Docker container every time changes are made in the host - just as it would if i ran 'ng serve' on the host machine.

I've managed to run the Angular app in a Docker container but i'm unable to access the app from the host. I am able to access other apps from other containers without any problem. It's the first time i'm using Angular with Docker and for some reason things aren't going as expected.

Here are my settings:

.env:

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

Dockerfile:

ARG CMS_IMAGE

FROM ${CMS_IMAGE} AS node

ARG PROJECT_NAME

RUN mkdir -p /srv/www/${PROJECT_NAME}/cms

WORKDIR /srv/www/${PROJECT_NAME}/cms

COPY /cms/package*.json ./

RUN npm install

COPY /cms ./

EXPOSE 4200/tcp

RUN npm start #executes 'ng serve --host 0.0.0.0'

docker-compose.yml:

version: '3.7'

services:

  cms:
    container_name: ${PROJECT_NAME}_cms
    build:
      context: .
      dockerfile: .docker/cms/Dockerfile
      args:
        CMS_IMAGE: ${CMS_IMAGE}
        PROJECT_NAME: ${PROJECT_NAME}
    ports:
      - 4200:4200
    volumes:
      - ./cms:/srv/www/${PROJECT_NAME}/cms

When i start the container everything runs as expected:

** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **

But when i try to open the app from the host i get ERR_CONNECTION_REFUSED. I searched for similar threads and tried most of their solutions, but without any success. What am I doing wrong?

I'm running MacOS Mojave with Docker 2.0.0.3 (31259).

E_net4
  • 27,810
  • 13
  • 101
  • 139
Ricky
  • 2,912
  • 8
  • 47
  • 74
  • 1
    Although not an expert on this but Check these [**Dockerizing an Angular app**](https://mherman.org/blog/dockerizing-an-angular-app/) and [**this as well**](https://stackoverflow.com/questions/44176922/docker-container-doesnt-reload-angular-app), try to add `expose 49153` in Dockerfile and `ports - '49153:49153'` in `docker-compose.yml`, might be helpful ! – Sourav Dutta Apr 27 '19 at 05:40
  • 1
    If you try the same from inside the container does it work? – Mihai Apr 27 '19 at 07:05
  • Hi guys, thanks for the suggestions. After several hours of hammering my head i finally found why it didn't work. Answered my question with the solution. – Ricky Apr 27 '19 at 16:47

1 Answers1

3

With my initial settings, even though Angular CLI wasn't installed, the app was built and being served. But the Angular server caused the container creation/start to stall, thats why i was unable to access it.

In order to get everything working as expected, i installed Angular CLI in the container and used it to run the app:

Dockerfile:

ARG CMS_IMAGE

FROM ${CMS_IMAGE} AS node

ARG PROJECT_NAME

RUN mkdir -p /srv/www/${PROJECT_NAME}/cms

WORKDIR /srv/www/${PROJECT_NAME}/cms

COPY /cms/package*.json ./

RUN npm install

RUN npm install -g @angular/cli #added

COPY /cms ./

EXPOSE 4200/tcp

#RUN npm start #executes 'ng serve --host 0.0.0.0' #removed!
CMD ng serve --host 0.0.0.0 #added
Ricky
  • 2,912
  • 8
  • 47
  • 74
  • do you have any idea why we need to do this? What exactly is the difference of npm running the `ng serve` vs running it on the command line in the container? – ELI7VH Dec 08 '20 at 19:26
  • Hi @ELI7VH i work on two different environments with the same projects folder (MacOS and Windows). In order to keep everything working on both env, i use Docker. Also, i want to keep my computers clean of all the different software, library's, npm packages, etc, needed for all my projects. So, instead of having everything installed on the host machines, it's all kept inside the container. – Ricky Dec 10 '20 at 07:46
  • no i get that. I also keep everything inside containers. But your command executes `ng serve`(inside your container) instead of `npm run start` (inside your container) What is the difference? – ELI7VH Dec 11 '20 at 18:01
  • I'm not using 'npm run start' becasue it's defined in the package.json file as 'ng serve --disable-host-check --aot'. Since this is a project used by multiple devs (and everyone has a different dev env), I don't want to change the default settings. So, instead of using 'npm run start', I use my custom ng serve command. I understand that this might not be ideal, but it solves my issue. For example, in other projects, all devs are using Docker and we all share the same project settings. – Ricky Dec 16 '20 at 09:52
  • got it. thank you for clarifying. I just wanted to know if there was something in the `npm run start` that could have been breaking it. Do you mean to say some of your team members are not embracing docker? how STRANGE :P – ELI7VH Dec 16 '20 at 19:15
  • Great to know i was able to clarify the issue :) Yup, it's true... some of them are still using virtual machines for everything (old school) ;) – Ricky Dec 17 '20 at 09:03