Creating and running an Angular application in a Docker container
Tags: angular, docker, container, tutorial
Published: 2024-01-03 12:10:03

# Introduction

In this article, a WEB application will be created using the latest version of [Angular](https://angular.io/), a [Docker](https://www.docker.com/) image will be created and this image will be run in a Docker container.



# Prerequisites


Before you start, you need to install and configure the tools below to create the Angular application and the Docker image.

* [git](https://git-scm.com/): Git is a distributed version control system and it will be used to sync the repository.
* [Node.js and npm](https://nodejs.org/): Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node.js Package Manager). They will be used to build and run the Angular application and install the libraries.
* [Angular CLI](https://angular.io/cli): Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application.
* [Docker Engine](https://docs.docker.com/engine/install/): Docker Engine is a command line utility tool for Docker and it will be used to create and run containers.
* IDE (e.g. [Visual Studio Code](https://code.visualstudio.com/) or [WebStorm](https://www.jetbrains.com/webstorm/)): IDE (Integrated Development Environment) is a tool with a graphical interface to help in the development of applications and it will be used to develop the Angular application.



# Getting started


## Create the Angular application


[Angular](https://angular.io/) is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 17 and Google is the main maintainer of the project.

**1.** Let's create the application with the Angular base structure using the `@angular/cli` with the server-side rendering (SSR) disabled, the route file and the SCSS style format.

```powershell
ng new angular-docker --ssr false --routing true --style scss
CREATE angular-docker/README.md (1067 bytes)
CREATE angular-docker/.editorconfig (274 bytes)
CREATE angular-docker/.gitignore (548 bytes)
CREATE angular-docker/angular.json (2806 bytes)
CREATE angular-docker/package.json (1045 bytes)
CREATE angular-docker/tsconfig.json (903 bytes)
CREATE angular-docker/tsconfig.app.json (263 bytes)
CREATE angular-docker/tsconfig.spec.json (273 bytes)
CREATE angular-docker/.vscode/extensions.json (130 bytes)
CREATE angular-docker/.vscode/launch.json (470 bytes)
CREATE angular-docker/.vscode/tasks.json (938 bytes)
CREATE angular-docker/src/main.ts (250 bytes)
CREATE angular-docker/src/favicon.ico (15086 bytes)
CREATE angular-docker/src/index.html (299 bytes)
CREATE angular-docker/src/styles.scss (80 bytes)
CREATE angular-docker/src/app/app.component.scss (0 bytes)
CREATE angular-docker/src/app/app.component.html (20884 bytes)
CREATE angular-docker/src/app/app.component.spec.ts (940 bytes)
CREATE angular-docker/src/app/app.component.ts (373 bytes)
CREATE angular-docker/src/app/app.config.ts (227 bytes)
CREATE angular-docker/src/app/app.routes.ts (77 bytes)
CREATE angular-docker/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
```

**2.** Now we will run the application with the command below.

```powershell
npm start

> angular-docker@0.0.0 start
> ng serve


Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  23.23 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial Total | 106.03 kB

Application bundle generation complete. [1.504 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
```

**3.** Ready! Next, we will access the URL `http://localhost:4200/` and check if the application is working.


## Create the Docker image


[Docker](https://www.docker.com/): Docker is a software that allows developers to create and run container applications.

**1.** Let's create the `Dockerfile` file with the Docker image configuration in the root directory of the Angular application.

```powershell
touch Dockerfile
```

**2.** Now we will configure the `Dockerfile` file with the content below.

```powershell
FROM node:alpine

WORKDIR /usr/src/app

COPY . /usr/src/app

RUN npm install -g @angular/cli

RUN npm install

CMD ["ng", "serve", "--host", "0.0.0.0"]
```

Notes:

* The `FROM node:alpine` setting defines the base Docker image.
* The `WORKDIR /usr/src/app` setting defines the default application directory. The defined directory is created if it does not exist.
* The `COPY . /usr/src/app` setting copies the local application files and directories to the defined directory.
* The `npm install -g @angular/cli` setting installs the global command line dependency for Angular.
* The `RUN npm install` setting installs the Angular application dependencies.
* The `CMD ["ng", "serve", "--host", "0.0.0.0"]` setting creates and runs the Angular application for external access.

**3.** Next, we will create the image with with the command below.

```powershell
docker build -t angular-docker .
```

**4.** After create the image, we will check if the image was created with the command below.

```powershell
docker images
REPOSITORY       TAG      IMAGE ID       CREATED          SIZE
angular-docker   latest   73bfa0093a57   10 seconds ago   463MB
```

**5.** Ready! The Docker image with ID `73bfa0093a57` and 463MB was created.


## Run the Docker container


**1.** Let's run the Docker container using the image created of the Angular application with the command below.

```powershell
docker run -p 4201:4200 angular-docker
```

**2.** Now we will check if the container is running with the command below.

```powershell
docker ps
CONTAINER ID   IMAGE            COMMAND                  CREATED         STATUS         PORTS                                       NAMES
b9f106cbdcca   angular-docker   "docker-entrypoint.s…"   5 seconds ago   Up 4 seconds   0.0.0.0:4201->4200/tcp, :::4201->4200/tcp   eloquent_elgamal
```

**3.** Ready! Next, we will access the URL `http://localhost:4201/` and check if the application is working inside the Docker container.

The application repository is available at [https://github.com/rodrigokamada/angular-docker](https://github.com/rodrigokamada/angular-docker).



# Conclusion


Summarizing what was covered in this article:

* We create an Angular application.
* We create a Docker image.
* We run a Docker container.
* We tested the Angular application inside the Docker container.

You can use this article to create a Docker container with an Angular application image.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my [blog](https://rodrigo.kamada.com.br/blog/criando-e-executando-uma-aplicacao-angular-em-um-conteiner-docker) in portuguese.

To stay updated whenever I post new articles, follow me on [Twitter](https://twitter.com/rodrigokamada) and [LinkedIn](https://www.linkedin.com/in/rodrigokamada).