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.
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.
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
Run the application by using the command given below:
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:
FROM node:latest as node
COPY . .
RUN npm install
RUN npm run build –prod
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.
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|
docker build -t bacancy/angular-app:latest .
You can get the list of the Docker images using the command given below:
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.
Use the code given below to push the Docker image to Docker Hub.
|docker push bacancy/angular-app:latest|
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.
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.
- How To Install and Use Docker on Ubuntu 22.04
- How to Open Command prompt Windows 10
- How to dual boot windows 10 and ubuntu
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.