Dockerize an Angular application

To deploy applications and run distributed applications without launching an entire virtual machine for each application, an OS-level virtualization method called containerization is used.

In the previous post, we have discussed step by step procedures on how to build a basic Angular application. In this post, let’s dockerize the Angular application using Docker tool for containerization and push the image to DockerHub to store your repositories to work better with teams.

This tutorial will be explaining the following parts:

Part 1: Steps to follow

Part 2: Dockerize an Angular Application

Part 3: Push the application to Docker Hub Repository

Prerequisites:

1. Install Node.Js

2. Angular requires Node.Js 8.x or 10.x

3. Angular application on github

3. Install Docker on your system

4. Create Docker Hub account

Part 1: (Steps to follow):

1. Build angular application on local system

2. Test your application

3. Create nginx.conf file

4. Build angular application and generate “dist” folder

5. Create Dockerfile in the application directory

6. Build the docker container

7. Run the container

8. Publish the docker container to Docker-Hub

 

1. Build angular application on local system:

If you want to create a basic angular application, you can follow the steps here in this link

How to build a basic Angular application

2. Test your application:

You can run the below command in the directory of the application folder to test on your local host.

ng serve --open

Now go to http://localhost:4200/ and check if your web application is working fine or not. Port 4200 is the default port number for Angular applications.

If it’s working as it should be, then proceed to the next step with nginx.conf file.

Part 2: Dockerize an Angular Application:

3. Create nginx.conf file:

Create a file named nginx.conf in your directory

nginx.conf (location is at the main directory)

Enter the below configuration in the file and save it. 

We are configuring it to listen to port 80 and the defining the root directory to be /usr/share/nginx/html in the nginx image. 

worker_processes 1;events {
   worker_connections 1024;
}
http {
   server {
      listen 80;
      server_name localhost;
      root /usr/share/nginx/html;
      index index.html index.htm;
      include /etc/nginx/mime.types;
      gzip on;
      gzip_min_length 1000;
      gzip_proxied expired no-cache no-store private auth;
      gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
      location / {
         try_files $uri $uri/ /index.html;
      }
   }
}

4. Build angular application and generate “dist” folder:

To get the dist folder, run the below command in the applications directory and then the dist folder will be generated in your directory

npm run build

5. Create Dockerfile in the application directory:

Go to the directory of the angular application and create a “Dockerfile” without any extensions to it.

Now edit the Dockerfile with the commands below.

Let us take a Nginx-alpine image:

FROM nginx:alpine

This command pulls the nginx:alpine image from the Docker registry
Copy the “dist” folder which was generated from your angular application to the default index.html web page location of nginx .

COPY /dist/my-angular-project/ /usr/share/nginx/html/

Now copy the “nginx.conf” configuration file to the default nginx configuration file location which is “/etc/nginx”.

COPY ./nginx.conf /etc/nginx/nginx.conf

Now we need to expose the port 8080.

EXPOSE 8080

Once you enter all the commands, your Dockerfile should look like this:

FROM Nginx:alpine

COPY /dist/my-angular-project/ /usr/share/nginx/html/

COPY ./nginx.conf /etc/nginx/nginx.conf

EXPOSE 8080

6. Build the docker container:

Once the Dockerfile and nginx.conf files are in the application directory and are built as required, we need to build the docker image. Docker image can be build by the following command on your terminal;

docker build -t my-angular-project .

Once the docker container is built successfully, you can check to confirm where the nginx.conf file and html files are copied to in the container from the Dockerfile commands we used. Grab your container ID (for example: fc946f38387d) and enter the below command by replacing it with your container ID. 

docker exec -it fc946f38387d /bin/sh

Now you are inside the Docker image and you can go the the file directories and check for the files if they are successfully copied while we did the docker build command.

7. Run the container:

Once the docker image is build with no errors and you have checked the files in the image, we should run the docker container by exposing port to 3000 (you can use any port number which is available)

docker run -p 3000:80 my-angular-project

You can now go to http://localhost:3000/ on your local computer and you should see the angular application running on your local port 3000.

Once you’re done with this, you can check the container ID and images on your docker engine by entering

docker container ps

docker images

Part 3: Push the application to Docker Hub Repository

8. Publish the docker container to Docker-Hub:

Now as this docker container is on your local computer, you can only use it on your system. If you want to share this container with others, you can publish it on the Docker Hub and you can or others can just pull the container from the Docker Hub and run it easily.

So, for publishing it to Docker Hub, enter the below commands. (you need to register to Docker Hub and get your credentials to publish) 

You can go to this link for registering.

Docker Hub – New User

Below commands are for logging in to your docker hub account, build your local container to your docker hub account and then push the container to your docker hub account.

Docker login

docker image build -t DOCKERID/my-angular-project:1.0 .

Docker push DOCKERID/my-angular-project:1.0

You can login to your Docker Hub account and check your repositories and you should see my-angular-project container there.

Great! You have a container in your account now and you can pull the image whenever you want to make life easy by this command.

docker pull DOCKERID/my-angular-project

You have now successfully built Dockerzied your angular application and pushed it to your docker hub account.

We will see more examples on how to dockerize Django, Flask, NodeJS applications and deploy them in the upcoming blog posts. Please checkout the DevOps Pal blog for more updates on web, deployment, cloud, DevOps, and more.