Docker: Angular setup + issue exposed port not accessible

Dockerizing an Angular application + how to solve the issue of an exposed port on the Docker container is not accessible in your browser

Create DockerFile

Create a DockerFile in the root folder of the project with the following content.

FROM node:14.15.0

WORKDIR /app

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

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


COPY . /app

CMD npm start

• Use the latest LTS version of Node.js to create the Docker container
• Create a working directory in the container (WORKDIR /app)
• Copy package.json and install all dependencies in Docker container

• Install the latest version of the angular-cli globally in the container

• Copy the current directory into the /app directory of the container

• Add the command npm start

Create Docker Image

Create a new DockerImage with the name of your app (angularapp) and a tag of choice (dev in this case).
Then add the current directory (.) as a second parameter to the build command

docker build -t angularapp:dev .

Run Docker container with the created image

docker run -v ${PWD}:/app -v/app/node_modules -p 4200:4200 --rm angularapp:dev

bash

• -v ${PWD}:/app mounts the code in the containers /app directory
• -v/app/node_modules mounts the node_modules of the container to be used instead of the locally installed node_modules folder. Deleting the locally installed node modules is possible now
• -p 4200:4200 exposes the 4200 port (ng serve uses default port 4200) of the Docker container to other docker containers, and maps it to the 4200 port of the Docker host
• --rm will remove all mounted volumes after the container exits
• angularapp:dev defines which image with which tag to run

Issue of unaccessible exposed ports

After executing the docker run command the container is up and running. Running docker ps confirms this.

Using the container_id or container name and running docker port {container_id/container name} shows that port 4200 of the host is mapped to the 0.0.0.0:4200 of the running container
(4200/tcp -> 0.0.0.0:4200)

But using http://localhost:4200 in the browser will not give any results. The browser tells the page is not available/accessible.

Entering the container and verifying that the Angular local dev-server is running in the container and returning a valid HTML page is confirming that the container is working, access from the Docker host is the current issue

How to verify Angular dev-server is up and running
> docker exec -it {container_id/container name} /bin/bash
> curl localhost:4200
A valid HTML file should be visible 

The issue is that, if we check the Angular-cli docs for serving an application(ng serve), the default host the dev-server listens too is localhost. Unfortunately, an outside connection (from Docker host' browser) to the Docker container is not using localhost

If we add the following params to the ng serve command to ng serve --host 0.0.0.0 and restart the docker container, using http://localhost:4200 in the Docker host browser should now work

Comments

[Innocent Mazando]

3 years later I am still coming to say sir you are heaven sent :)

Thank you very much for a life saving solution :)

[Shangsu]

Thank you! you really save my life!!

[Google Developer Student Clubs - ISSATSO]

Thanks dude u saved my life , the only person on the entire web who has the right solution , I created an account here just to thank you , I sent you a connection in linkedIn , I would be thankful if you accept it

[Manikandan]

I did the same :) I was scratching my head for a couple of days and this helped to fix it

[daicarjim]

Uff you saved me from this one. I was actually bothering with this since yesterday and I didn't know what it could be. Thank you. Greetings from Bogota-Colombia.