Creating and running an Angular application in a Docker container
Introduction
In this article, a WEB application will be created using the latest version of Angular, a Docker 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: Git is a distributed version control system and it will be used to sync the repository.
- Node.js and npm: 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: 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: 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 or 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 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.
2. Now we will run the application with the command below.
3. Ready! Next, we will access the URL http://localhost:4200/
and check if the application is working.
Create the Docker image
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.
2. Now we will configure the Dockerfile
file with the content below.
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.
4. After create the image, we will check if the image was created with the command below.
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.
2. Now we will check if the container is running with the command below.
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.
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 in portuguese.
To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.