Dockerizing an Angular App: A Beginner’s Guide

Introduction

Docker has become an essential tool in modern software development, allowing developers to package their applications into containers. In this tutorial, we’ll explore how to dockerize an Angular app step by step.

Prerequisites

Before we begin, ensure you have the following:

1. Angular app source code
2. Docker installed on your machine
3. Basic understanding of Angular and command-line interface

Dockerfile

The Dockerfile is a script that contains instructions for Docker to build an image. Let’s break down a simple Dockerfile for an Angular app:

# Use a base image with Node.js
FROM node:latest as build

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the container
COPY package*.json /app/

# Install Angular dependencies
RUN npm install

# Copy the entire Angular app to the container
COPY . /app/

# Build the Angular app for production
RUN npm run build --prod

# Use NGINX as a lightweight web server
FROM nginx:latest

# Copy the built Angular app to NGINX web server directory
COPY --from=build /app/dist/* /usr/share/nginx/html/

# Expose port 80
EXPOSE 80

# Command to start NGINX when the container starts
CMD ["nginx", "-g", "daemon off;"]

Explanation of key Dockerfile instructions:

• FROM: Specifies the base image to use (Node.js for building and NGINX for serving the Angular app).
• WORKDIR: Sets the working directory inside the container.
• COPY: Copies files from the host machine to the container.
• RUN: Executes commands during the image build process.
• EXPOSE: Exposes a specific port to allow external access.
• CMD: Defines the default command to run when the container starts.

.dockerignore file

The .dockerignore file is used to specify which files and directories should be excluded from the Docker build context. It helps minimize the size of the image by avoiding unnecessary files. Here's an example:

node_modules
.git
dist

Explanation:

• node_modules: Excludes the Node.js modules directory.
• .git: Excludes the Git version control directory.
• dist: Excludes the built output directory of the Angular app.

Building and Running the Docker Image

Once you have created your Dockerfile and .dockerignore file, follow these steps to build and run the Docker image for your Angular app:

Step 1: Build the Docker Image

Open a terminal or command prompt and navigate to the root directory of your Angular project (where your Dockerfile is located).

Use the following command to build the Docker image:

docker build -t my-angular-app .

• docker build: This command builds a Docker image based on the instructions in the Dockerfile.
• -t my-angular-app: Tags the image with a name (replace my-angular-app with your desired image name).
• .: Specifies the current directory as the build context for Docker.

Step 2: Run the Docker Container

Once the image is built successfully, you can run a container based on that image:

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

• docker run: Creates and starts a new container based on the specified image.
• -d: Runs the container in detached mode (in the background).
• -p 8080:80: Maps port 8080 on your local machine to port 80 inside the container (adjust the ports as needed).
• my-angular-app: Refers to the name of the Docker image you built earlier.

Step 3: Access the Angular App

Open a web browser and navigate to http://localhost:8080 (or the port you specified) to access your Angular app running inside the Docker container.

Additional Docker Commands

• To list all running containers:

docker ps

• To stop a running container:

docker stop <container_id>

Replace <container_id> with the actual ID or name of the container obtained from docker ps.

Conclusion

Dockerizing your Angular application offers numerous advantages in terms of portability, consistency, and ease of deployment. By encapsulating your app and its dependencies within a container, you create an environment that remains consistent across various platforms and development environments.

Throughout this guide, we covered essential steps to dockerize an Angular app:

1. Creating a Dockerfile: Defined the instructions necessary for Docker to build an image. This included setting up the environment, installing dependencies, copying the application code, and configuring the server.
2. Using .dockerignore: Ignored unnecessary files and directories during the Docker build process, optimizing the image size and build speed.
3. Building the Docker Image: Executed the docker build command to create an image based on the Dockerfile, ensuring that the Angular app and its dependencies were encapsulated within the container.
4. Running the Docker Container: Launched a container from the built image using the docker run command, enabling access to the Angular app via a specified port.

By following these steps, you’ve successfully leveraged Docker to package your Angular app into a self-contained, portable unit that can be easily distributed and deployed across different environments, without worrying about inconsistencies or dependency conflicts.

Happy containerizing!