Dockerizing an Angular Application: A Step-by-Step Guide

Dockerizing your Angular application can simplify deployment and ensure consistency across different environments. In this guide, we will walk you through the process of creating a Docker image for an Angular application using the latest Angular version (17).

Prerequisites

• Node.js and npm installed on your machine
• Docker installed on your machine
• Angular CLI installed globally (npm install -g @angular/cli)
• IDE (Visual Studio Code, IntelliJ IDEA, etc.)

Step 1: Create an Angular Application

If you don't have an existing Angular application, you can create a new one using Angular CLI.

Open your terminal and run the following commands:

ng new my-angular-app
cd my-angular-app

This will create a new Angular application in the my-angular-app directory.

Step 2: Create a Production Build

Before we can dockerize the Angular application, we need to create a production build.

Run the following command:

ng build --prod

This command will generate a dist directory containing the optimized production build of your Angular application.

Step 3: Create a Dockerfile

Create a file named Dockerfile in the root directory of your Angular project. This file will contain instructions for building the Docker image.

# Use an official Node runtime as a parent image
FROM node:20 as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Angular application
RUN npm run build --prod

# Use an official Nginx image to serve the Angular application
FROM nginx:latest

# Copy the build output to the Nginx HTML directory
COPY --from=build /app/dist/my-angular-app /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx server
CMD ["nginx", "-g", "daemon off;"]

Explanation:

• FROM node:20 as build: Use the official Node.js image to build the Angular application.
• WORKDIR /app: Set the working directory inside the container to /app.
• COPY package*.json ./: Copy package.json and package-lock.json to the container.
• RUN npm install: Install the project dependencies.
• COPY . .: Copy the rest of the application code to the container.
• RUN npm run build --prod: Build the Angular application.
• FROM nginx:latest: Use the official Nginx image to serve the built Angular application.
• COPY --from=build /app/dist/my-angular-app /usr/share/nginx/html: Copy the build output to the Nginx HTML directory.
• EXPOSE 80: Expose port 80 to the host.
• CMD ["nginx", "-g", "daemon off;"]: Start the Nginx server.

Step 4: Build the Docker Image

Run the following command to build the Docker image:

docker build -t my-angular-app .

Explanation:

• docker build: The Docker command to build an image.
• -t my-angular-app: Tags the image with the name my-angular-app.
• .: Specifies the current directory as the build context.

Step 5: Run the Docker Container

Run the following command to start a Docker container from the image:

docker run -p 80:80 my-angular-app

Explanation:

• docker run: The Docker command to run a container.
• -p 80:80: Maps port 80 of the container to port 80 on the host machine.
• my-angular-app: The name of the Docker image to run.

Step 6: Verify the Application

Open a web browser and navigate to http://localhost. You should see your Angular application running.

Additional Docker Commands

6.1 List Docker Images

To list all Docker images on your system, run:

docker images

6.2 List Running Containers

To list all running Docker containers, run:

docker ps

6.3 Stop a Running Container

To stop a running Docker container, run:

docker stop <container_id>

Replace <container_id> with the actual container ID obtained from the docker ps command.

6.4 Remove a Docker Container

To remove a Docker container, run:

docker rm <container_id>

Replace <container_id> with the actual container ID.

6.5 Remove a Docker Image

To remove a Docker image, run:

docker rmi my-angular-app

Conclusion

In this guide, you have learned how to dockerize an Angular application using Docker. We covered:

• Creating a production build of the Angular application.
• Writing a Dockerfile to build and serve the Angular application using Nginx.
• Building the Docker image.
• Running the Docker container.
• Verifying the application.

By following these steps, you can easily package your Angular application into a Docker container, providing a consistent and portable deployment environment.