Containerize your Angular App In Docker Container

Priya BhadaurjaJune 17, 2023

0 443

Table of Contents

Learn how to containerize your Angular app in Docker for effortless and consistent deployment. Follow our step-by-step guide.

With significant popularity within the tech development marketplace. And ranked as the fifth most used framework per StackOverflow Developer Survey 2022 with 20.39% votes, Angular is a prominent option for developers and business owners. As we know, Angular is developed and maintained by the Google Team; many organizations use it for their web app development. However, recently the Angular App in Docker has gained traction. Many new developers often come across the question, ‘How to deploy Angular applications using Docker?’ To address this query of worldwide product owners, let us proceed with our topic.

How to Deploy Angular Applications Using Docker?

In the present times, it has become very prominent and easy to Dockerize and deploy the Docker image in production using the container orchestration engine such as Docker Swarm or Kubernetes. However, while deploying your Angular app in Docker, you must follow several steps to make your application functional and leverage the benefits when you Dockerize Angular Apps. For your better understanding, let us Dockerize an Application, Create an Image and run it on Docker on our local machine by following the steps given below:

Create an Angular Application
Create your Dockerfile in Angular Application
Build Docker Image from Docker File
Run Containerized Angular Applications on Docker

Before starting your application development process, it is essential to have some basic knowledge of the Angular framework; for a brief recall, we know Angular is a framework that helps build the client side or the front end of your application using HTML, CSS, and TypeScript. Moving forward with the development process, the Node.js and Angular CLI must be installed within the local system.

Creating an Angular Application

To create the Angular project, you must follow the command below for creating an Angular application.

ng new sample-app

Navigate to the Project Directory

cd sample-app

Run the application by using the command given below:

ng serve

Create your Dockerfile in Angular Application

Create your Docker file inside the root of your Angular project folder. After that, create a file names Dockerfile and enter the code given below:

#stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build –prod

#stage 2
FROM nginx:alpine
COPY –from=node /app/dist/demo-app /usr/share/nginx/html

When using your Angular project, you can change the name of the application from demo-app to your preferred name in the last line of your application name. The rest of the code works fine with any Angular application if we place the Dockerfile in the root of your Angular project.

Build Docker Image from Docker File

Then, you can use the command given below to generate the Docker image for using the Angular app using Docker.

docker build -t dockerhub_name/image_name:tag dockerfile_location
#Example
docker build -t bacancy/angular-app:latest .

You can get the list of the Docker images using the command given below:

docker ps

Push Docker Image to Docker Hub

Moving forward, push the Docker image to the Docker hub or any container registry such as (Azure CR or AWS ECR) if you aim to deploy the application on the Cloud Server.

Then, you need a Docker Hub account to push the Docker image to the Docker Hub. After successfully creating your Docker Hub account, log in to your Docker Hub into your terminal.

docker login

Use the code given below to push the Docker image to Docker Hub.

docker push bacancy/angular-app:latest

Run Docker Container

Run the application using the command given below:

docker run -d -p 80:80 bacancy/angular-app:latest

This command runs on port number 80. Therefore, you can access the Angular application using the IP address and port number.

http://ip_address:80/

The Docker image created within the example is made public; therefore, you can directly pull the Docker image from the Docker hub and test, and after that, test the application. Below given is the code for the Docker image.

bacancy/angular-app

Conclusion

In this tutorial for Angular App in Docker, we just told you How to create a Dockerfile for your Angular application and how you can quickly generate the Docker image. Along with How to push your Docker image to the Docker Hub. Docker eases the application deployment by packaging needed components in a single image file, reducing the deployment time and allowing you to scale your application using the Kubernetes container orchestration tool. However, if you are a business owner unsure if Angular Docker Containerization is your ideal solution for your next project. Contact the most prominent Angularjs development company to get the most out of your web application development.