Run Angular app inside a Docker container in 5 mins

Yes heard it right! it only takes 5 mins to have your new or existing angular app running inside Docker. This tutorial is for beginners. Once you learn this setup you can then optimize it to suit your needs. So Lets get started.

Obviously, to keep things concise, I assume that you have already setup Docker and Angular environment on your machine.

Pre-requisites

• Docker
• Node Js
• Angular

If you haven’t installed any of the previous components, pause here and install them first. All of these are pretty easy to install, there is no complexity. I will be using Windows OS but the steps are same for Mac and Linux.

Steps

Create an Angular application

If you already have an existing Angular project, you can skip this step. Otherwise, it is easy to create a new one. Open cmd and move to the folder of your choice. Then execute the following command.

ng new my-app

Here we named the project as ‘my-app’. You will be asked a few setup questions, just answer as following

c:\Sides\docker>ng new my-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

[amazon_auto_links id=”529″]

Build your Angular app

Using cmd navigate to the root of the angular project (at the level where you have package.json). For example:

c:\Sides\docker>cd my-app

Now lets build the app using the build command.

c:\Sides\docker\my-app>ng build

This will generate the compiled files in a folder at location dist\my-app starting at the root level of the project.

Create a Docker File

For simplicity, using file explorer, open the root folder of the angular project in this case ‘my-app’ and add a new file called Dockerfile. It is very important that this file should not have any extension. Now copy the following code inside the Dockerfile and save it.

FROM nginx:1.17.1-alpine
COPY /dist/my-app /usr/share/nginx/html

Basically, this file contains instructions that Docker will understand. Let us see what this means.

FROM command tells Docker to download the specified image from Docker Hub to your machine locally and use it to create an environment. In this case we are using nginx which is a powerful open source reverse proxy server to host our Angular app.

COPY command tells Docker to copy the files from /dist/my-app on the host machine to a location /usr/share/nginx/html inside the Docker container.

Build Image and start container

Now let us create our docker image using the docker build command

docker build -t my-app-image .

To verify if the image is created successfully run the docker images command. You should see our image named my-app-image in the list.

C:\Sides\docker\my-app>docker images
REPOSITORY                       TAG                 IMAGE ID            CREATED             SIZE
my-app-image                     latest              fa84d1a2d2a8        4 minutes ago       34.7MB
redis                            latest              df5748206578        8 days ago          98.3MB
nginx                            latest              e791337790a6        11 days ago         127MB
nginx                            1.17.1-alpine       ea1193fd3dde        10 months ago       20.6MB
jenkins                          latest              cd14cecfdb3a        21 months ago       696MB
mcr.microsoft.com/mssql/server   2017-CU8-ubuntu     229d30f7b467        22 months ago       1.43GB

Lets start our container from the image that we just built. To run a container we will the docker run command.

docker run --name my-app -dp 8010:80 my-app-image

To translate this command in English “Hey docker run the container with a name my-app with the ports 8010:80 from the image named my-app-image“.

And that’s it! Now open your browser tab and type localhost:8010, it will load the Angular app.