How to “Dockerize” Your Angular (14) Application

Docker Introduction

Docker has revolutionized the way modern applications are developed and deployed, offering a flexible and efficient way to package and run applications in containers. In this blog, we will delve into the reasons why Angular developers and DevOps engineers should consider dockerizing their applications and the advantages that come with it. We will also cover the basics of dockerizing an Angular application, from building a Docker image to deploying it in a production environment. Whether you are an experienced Angular developer or just starting out, this blog is designed to provide you with a comprehensive introduction to the world of Docker and its impact on Angular application development.

Benefits of “Dockerizing” Angular Application

There are several benefits of "dockerizing" an Angular application, including:

1. Portability: Docker containers can run consistently on any infrastructure, making it easier to move the application from development to production environments.
2. Isolation: Docker containers isolate the application and its dependencies on the host system, reducing the risk of conflicts with other applications or dependencies.
3. Reproducibility: Docker containers allow for consistent and repeatable builds, ensuring that the application will always run the same way, no matter where it's deployed.
4. Scalability: Docker containers can be easily scaled up or down to meet changing resource demands, making it easier to handle traffic spikes or handle increased loads.
5. Ease of Deployment: Docker containers can be deployed with a single command, making it easier to automate deployment processes and reduce the time and effort required to get the application into production.

Overall, dockerizing an Angular application can provide improved consistency, portability, and ease of deployment, making it a useful tool for modern web development.

Prerequisites

The prerequisites for simple dockerizing an Angular application include:

1. Docker installed on your development machine
2. An Angular application, which can be a new or an existing application.
3. A basic understanding of Angular development, as well as Docker and containerization

Create a Dockerfile

A Dockerfile is a script used to automate the creation of a Docker image for an application. It contains the necessary instructions for building an image that can be used to deploy the application. At this step, it is assumed that the reader has an Angular application and docker installed locally.

Create a Dockerfile on the root of Angular application with the following content:

FROM node:16-alpine AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 4200

CMD ["npm", "start"]

Dockerfile Explanation

This Dockerfile uses the official Node.js 16 image as the base image. It sets the working directory to /app, copies the package.json and package-lock.json files, and installs the application's dependencies using npm install. The rest of the application files are then copied to the image, and the Angular application is built using npm run build. The default port of the Angular application is exposed, and the application is started using the npm start command.

If you wish to run specific environment defined in angular.json, change the following line in the previously defined Dockerfile:

RUN npm run build --configuration env_name

Build Your Docker Image

Once the Dockerfile has been defined, the next step is creating a docker image that can be run as docker container. Since the previous Dockerfile example is used primarily for development and local usage, we are going to build the image with a local tag (without docker registry specified).

Position yourself in the root directory where Dockerfile is created, and run the following command in terminal:

docker build –t angular-frontend .

Run Your Angular Docker Container

 After you have successfully finished building the docker image, you can run the corresponding docker container using the previously defined image tag. To launch the angular application, simply execute the following command:

docker run –d –p 4200:4200 angular-frontend

The docker run command with the specified options -d -p 4200:4200 is used to run a Docker container in the background (-d option) and map a host port to a container port (-p option).

In this case, the options -p 4200:4200 maps the host port 4200 to the container port 4200. This means that the application running in the container, which is specified by the image angular-frontend, will be accessible at http://localhost:4200 on the host.

Why You Should Dockerize using Nginx

Dockerizing an Angular application in combination with Nginx offers several advantages over ”regular” dockerization:

1. Improved performance: Nginx is a web server optimized for serving static content, such as the HTML, CSS and JavaScript files generated by Angular. This can lead to faster page load times for your users.
2. Scalability: By using Nginx as a reverse proxy server, you can easily scale your application horizontally by adding more Docker containers running Nginx and Angular.
3. Improved security: Nginx can be configured to provide additional security features, such as SSL termination, rate limiting and IP blocking.
4. Better organization: Separating the web server and application server into separate containers can make your application easier to manage and maintain.

In summary, dockerizing an Angular application in combination with Nginx provides improved performance, scalability, security, and organization compared to a regular dockerization approach.

Dockerfile with Nginx

FROM node:16-alpine AS build

WORKDIR /app

COPY . .

RUN npm install

RUN npm run build

# Serve Application using Nginx Server

FROM nginx:alpine

COPY --from=build /app/dist/project-name/ /usr/share/nginx/html

EXPOSE 80

This Dockerfile leverages the power of multi-stage builds to build and serve your Angular application in an optimized and efficient manner. Unlike the traditional approach of serving the application using CMD, this Dockerfile utilizes Nginx to serve the compiled application as static content, which results in improved performance and scalability.

Performance Comparison

The following screenshot showcases a remarkable difference in RAM usage between the Docker container served via Nginx and the one built using conventional means. This highlights the superiority of utilizing Nginx to serve the application as static content, resulting in a more optimized resource utilization and superior performance.

Conclusion

In conclusion, dockerizing an Angular application offers a range of benefits, including increased portability, isolation, reproducibility, scalability, and ease of deployment. To get started, the prerequisites include having Docker installed and a basic understanding of Angular and containerization. The process involves creating a Dockerfile, building the Docker image, and running the Angular Docker container. Additionally, using Nginx in combination with Docker can result in improved performance and other benefits. With this guide, developers can easily start dockerizing their Angular applications and reap the advantages it offers.