Simple Guide to Dockerizing an Angular App

Introduction

Being able to containerize an application helps simplify the software development process and also facilitates collaboration across teams and devices. Recently, I had the chance to dockerize an Angular application, and I'm thrilled to share the step-by-step guide I used to do this.

In this guide, we will explore dockerizing an Angular application for both development and production environments.

Prerequisites

Before you proceed, ensure the following are installed and configured on your PC.

• Docker

• Node

• Angular CLI

Create a simple Angular application

Generate your angular application

$ ng new angular-docker

Enter Into the application folder

$ cd angular-docker

At this point, we should have an angular application with the below structure

Create a Dockerfile for the Development Environment.

At the root of our application folder, we will create a Dockerfile for development and name it Dockerfile.dev. Here is how our Dockerfile.dev will appear:

# Specify a node base imageFROM node:alpine# Work directoryWORKDIR /app# Install some dependenciesCOPY package.json .RUN npm install -g @angular/cliRUN npm installCOPY . .# Default CommandCMD ["ng", "serve", "--host", "0.0.0.0"]

Add a .dockerignore file to the root of the application. This will help to exclude unnecessary files in our Docker image. Here's what our .dockerignore file will look like

# Exclude node_modules (already included in the Dockerfile)node_modules/# Exclude build artifactsdist/# Exclude development-specific files.git/.gitignore.editorconfig.vscode/

Create Docker Image

$ docker build -t app:angular-docker -f Dockerfile.dev .

• -t: [image_name]:[image_tag]

• -f: development docker file

• .: current directory

Once we hit the enter key, our build will start and we will have the below when it finishes. This will output the build steps, and image id as shown below.

Run docker container

$ docker run -p 4200:4200 --name demo --rm app:angular-docker

• -p: [host_port]:[container_port]

• --name: container name

• --rm: deletes container once it is stopped

We can verify the running container in a different terminal by running

$ docker ps

This will show us the running container as shown below

At this point we can navigate to our running application by opening our browser and visiting http://localhost:4200/ and we will see our dockerized angular application.

Create a Dockerfile for Production Environment.

At the root of our application folder, we will create a Dockerfile for production and name it as Dockerfile.

We will use Nginx to serve our static files.

Here is how our Dockerfile will look:

# Stage 1: Build application# Specify a base imageFROM node:20-alpine as builder# Work directoryWORKDIR /app# Install some dependenciesCOPY package.json .RUN npm installCOPY . .# Build RUN npm run build --prod# Stage 2: Deploy stageFROM nginxCOPY --from=builder /app/dist/angular-docker/browser /usr/share/nginx/html

We can go ahead to build our image and create a container.

$ docker build -t app:angular-docker .$ docker run --rm -p 8080:80 angular-docker

We can navigate to the application at http://localhost:8080

Final Application Structure

Conclusion

I hope this guide has been helpful in dockerizing your Angular application. I have explained everything in simple terms, hoping that you understood it all.

If you have trouble understanding or find the guide unsatisfactory, please feel free to contact me. Until then, see you in the next guide.