Simple Guide to Dockerizing an Angular App
Tags: angular, docker, frontend
Published: 2024-05-08 01:28:56

---
title: Simple Guide to Dockerizing an Angular App
published: true
date: 2024-05-08 00:28:02 UTC
tags: angular, docker, frontend
canonical_url: https://yinkaakeju.hashnode.dev/simple-guide-to-dockerizing-an-angular-app
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1715023959018/8f8dd482-73b0-4c55-bed8-dcc6d3e58b27.png
---

### 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714788721814/0e4445e5-0757-46c5-81b0-63bb5ec2cac1.png)

### 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714793093823/b1389e62-5cea-4998-bd00-5968a615ec5e.png)

### 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1714794661333/a86fbb78-fdef-40c3-9b0f-0d5a86e9f3f1.png)

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715038541691/77bcff07-54b2-4858-bebd-09c3c4de3868.png)

### 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715029146814/47292aad-68e1-40b3-a2a4-1b181d8950b2.png)

### Final Application Structure

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1715039364040/8821a52f-e7a6-49b5-8832-30227529ea08.png)

### 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.