How to dockerize an angular application?

Dockerizing your Angular app is simpler than you think. With just a few steps, your application will be up and running inside a Docker container. Let’s walk through the process step by step.

Prerequisites

Before we begin, make sure you have the following:

• A basic understanding of how to build and run an Angular application.
• Node.js and npm installed on your machine.
• Docker installed and running.

Steps to Dockerize Angular

1. Write a Dockerfile.
2. Test the Dockerfile.
3. Celebrate your success!

1. Write a Dockerfile

First things first, let's write a Dockerfile to containerize your Angular app.

Where to place the Dockerfile?

Create a Dockerfile in the root of your Angular project, right where your package.json is located. This ensures that the Docker build process has access to all necessary files in the project.

What to put in the Dockerfile?

Here’s a simple, efficient Dockerfile that builds your Angular app using Node.js and serves it with Nginx:

# Arguments to avoid too many pulls from Docker Hub
ARG NODE_URI
ARG NGINX_URI

# Stage 1: Build Angular App
FROM ${NODE_URI:-node}:lts-alpine3.15 AS builder
WORKDIR /app

# Install Angular CLI globally
RUN npm install -g @angular/cli

# Copy package.json and install dependencies
COPY package.json /app
RUN npm install --legacy-peer-deps

# Copy the entire project and build the Angular app
COPY . /app
RUN npm run build --prod

# Stage 2: Serve Angular App with Nginx
FROM ${NGINX_URI:-nginx}:stable-alpine AS deployer
COPY --from=builder /app/dist/amp /usr/share/nginx/html

# Optionally configure Nginx
COPY nginx.conf /etc/nginx/nginx.conf

Why this Dockerfile?

This Dockerfile uses a multi-stage build approach:

• Stage 1 (builder): Uses a Node.js image to install dependencies and build the Angular app.
• Stage 2 (deployer): Uses an Nginx image to serve the built app.

2. Test the Dockerfile

Now that you’ve created the Dockerfile, let’s build and run your Docker container.

Step 1: Build the Docker Image

In the root of your Angular project (where the Dockerfile is located), run the following command to build your Docker image:

docker build -t nginx-angular-app .

This command builds the image and tags it as nginx-angular-app.

Step 2: Run the Docker Container

Once the image is built, use this command to run your Angular application in a container:

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

This command does the following:

• Runs the container in detached mode (-d) with an interactive terminal (-it).
• Maps port 80 on your local machine to port 80 in the container (-p 80:80).
• Names the container angular-app.

Step 3: Access Your Application

Open your browser and navigate to http://localhost to see your Angular app up and running in the container!

3. Pat Yourself on the Back 🎉

• Congratulations! You just Dockerized an Angular application like a pro.
• Grab a coffee or take a short break—you’ve earned it! ☕
• If you run into issues, don’t panic. Docker makes debugging easier, and with time, you’ll master it.

Next Steps

Now that you've successfully Dockerized your Angular app, here are a few things you can explore:

• Automating the build and deployment process with CI/CD pipelines.
• Customizing the Nginx configuration to optimize your app's performance.
• Using Docker Compose to manage multi-container applications.

By following these steps, you'll not only learn how to containerize your Angular application but also gain a better understanding of Docker's powerful capabilities. Happy coding!