How to dockerize Angular App?

In this article I will explain to you how to dockerize Angular App from scratch.

As you are checking out this article so I assume you have an Angular application that you want to dockerize and you might have same knowledge about Docker as well or at least have heard about it.

Anyways, what is Docker?

In brief, Docker is an open source DevOps tool designed to help developers and operations guys to streamline application development and deployment.By dockerizing an application means deploying and running an application using containers.

Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and deploy it as one package.

By doing so application can be deployed on any target environment/machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

Thus removing the deployment issues that occur due to various environment spec mismatch.

To learn more about docker checkout this link.

Prerequisite

• First, we need to have docker installed on our machine so that we can build docker image and run docker containers. There are different installation for Mac and Windows. For Windows 10 Professional and Enterprise install docker for desktop from this link but if you have Windows 10 Home edition like I have then you will have to installed Docker Toolbox from this link.
• We also need to have account at Docker Hub registry so that we can pull and push Docker images. It’s free so if you already haven’t one, checkout this link to create one for yourself.
• Last, we need an Angular application that we want to dockerize. So if you already have one that’s great but if you don’t then you can get the Angular app code that I am using in this article from my GitHub repository from this link.

Get Started…

In order to dockerize our Angular app we need to perform following steps.

• Launch the Docker machine.
• Create Dockerfile in our Angular app folder.
• Create Docker image from the Dockerfile.
• And last, run the Angular app in the container using Docker image.

So let’s get started…

Launch Docker Machine

Docker machine is a small Linux VM that hosts the Docker Engine which is a client-server application consists of Docker Daemon and Docker CLI that interacts with Docker Daemon to create Docker images or running containers etc.

• In case, you have installed Docker Desktop for Window or Mac when the installation finishes, Docker Machine is launched automatically. The whale image in the notification area indicates that Docker is running, and accessible from a terminal.
• If you have installed Docker Toolbox then there are 2 ways to create docker machine locally.
  • By double clicking on the docker Quick Start Terminal icon on your desktop.
  • Using docker-machine CLI “create” command to create new Docker machine.

Since I have Docker Toolbox installed so I will choose the easy way and click on the Quick Start Terminal icon that will open the terminal and launch the Docker machine.

You can run following docker-machine CLI command to check the Docker machine details and note the URL that we will use to open our Angular app in the browser.

$ docker-machine ls

You can do much more with docker-machine CLI commands like create, kill, start, stop Docker machine and much more but that is not in scope for this article however you can check-out docker.com for complete documentation on docker-machine CLI and also docker CLI as well.

Since now our Docker setup is up and running now we will focus on creating Dockerfile for our Angular app.

Create Dockerfile

Now in the terminal change directory to your Angular app folder and create a file name “Dockerfile” without any file extension using any dev editor like VS Code or just use Notepad.

Write following instructions in the Dockerfile and save it.

# Stage 1
FROM node:10-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build --prod

# Stage 2
FROM nginx:1.17.1-alpine
COPY --from=build-step /app/docs /usr/share/nginx/html

Explanation

• In Stage 1 we are copying our app code in the “app” folder and installing app dependencies from package.json file and creating production build using Node image.
• In the Stage 2 we are using nginx server image to create nginx server and deploy our app on it by copying build items from /app/docs to nginx server at /usr/share/nginx/html location. Note – if you are using your Angular app then replace docs with dist/ in the Dockerfile because by default build items are created at that location. In my case I have changed it to docs folder in the outputPath setting of angular.json file in my app.

Create .dockerignore file

Although it’s not necessary to have this file but it’s a good practice to have it since it can speed up image build process and also keep the image lean by excluding the unnecessary code from the Docker build context so that it doesn’t get into the image.

So just the way we created Dockerfile at the same location we create .dockerignore file and add following items that we don’t want to be copied into our docker image.

.git
.firebase
.editorconfig
/node_modules
/e2e
/docs
.gitignore
*.zip
*.md

Create Docker Image

Now run Docker build command to build Docker image of our app using Dockerfile that we have just created.

Note that I have given sanjaysaini2000/angular-app as name to my Docker image but you must replace it with the name you want to give to your app’s Docker image.

Also note that image name must be followed by the dot which means that the path of the Docker build context and Dockerfile is the current folder.

$ docker build -t sanjaysaini2000/angular-app .

This process will take 1-2 minutes to complete and at the end you will get successful message with image tag name.

You can run following Docker command to list the images created along with your Angular app image. You will also find node and nginx images that we used to create our app image and an intermediate image <none>. However these images are not required and can be deleted.

$ docker images

Run Docker Container

Finally run the following command in the terminal to run your Angular app in the Docker container and make sure to replace sanjaysaini2000/angular-app with your image name in this command.

$ docker run -d -it -p 80:80/tcp --name angular-app sanjaysaini2000/angular-app:latest

Basically, we want to create and run an interactive container in the background so we have used options –d and –it with the Docker run command. Since app in the container is available at port 80 so we used –p option and map the container port to the external host port using 80:80/tcp and name our container using --name option to angular-app followed by the image name.

Now open the browser and type URL http://<docker machine url>:80 in the address bar.

In my case it’s http://192.168.99.100:80

You have successfully dockerize and hosted angular app in a Docker container.

This Docker image is also available at my Docker Hub registry. You can get it from my angular-app repository if you don’t want to go through above process and only interested in running this Angular app in the Docker container.

I hope you have enjoyed this article…Cheers!!!

The post How to dockerize Angular App? appeared first on Sanjay Saini’s Tech World.