DEV Community 👩‍💻👨‍💻

Brent Vanwildemeersch
Brent Vanwildemeersch

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  • 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 .
Enter fullscreen mode Exit fullscreen mode

Run Docker container with the created image

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


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 
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
gdsc_issatso profile image
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

Collapse
 
maniboopathii profile image
Manikandan

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

Collapse
 
daicarjim profile image
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.

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.