Docker: Angular setup + issue exposed port not accessible
Tags: todayilearned, webdev, docker, angular
Published: 2020-11-06 10:22:13

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.
```DockerFile
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 (<i>WORKDIR /app</i>)
* Copy package.json and install all dependencies in Docker container
* Install the latest version of the [angular-cli] (https://github.com/angular/angular-cli) globally in the container

* Copy the current directory into the /app directory of the container
* Add the command <i>npm start</i>

### Create Docker Image
Create a new DockerImage with the name of your app (<i>angularapp</i>) and a tag of choice (<i>dev</i> in this case).
Then add the current directory (.) as a second parameter to the build command
```bash
docker build -t angularapp:dev .
```
### Run Docker container with the created image
```bash
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 <i>4200<i> port (ng serve uses default port 4200) of the Docker container to other docker containers, and maps it to the <i>4200<i> 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 

```bash
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](https://angular.io/cli/serve) 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