In this article, we will create a web application using the latest version of Angular, generate a Docker image, and then execute this image within a Docker container.
Before you start, you need to install and configure the tools below to create the Angular application and the Docker image.
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.
g 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.
npm start
> [email protected] 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.
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.
touch Dockerfile
2. Now we will configure the Dockerfile file with the content below.
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:
FROM node:alpine
setting defines the base Docker image.WORKDIR /usr/src/app
setting defines the default application directory. The defined directory is created if it does not exist.COPY . /usr/src/app
setting copies the local application files and directories to the defined directory.npm install -g @angular/cli
setting installs the global command line dependency for Angular.RUN npm install
setting installs the Angular application dependencies.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.
docker build -t angular-docker .
4. After create the image, we will check if the image was created with the command below.
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.
1. Let's run the Docker container using the image created of the Angular application with the command below.
docker run -p 4201:4200 angular-docker
2. Now we will check if the container is running with the command below.
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.
Summarizing what was covered in this article:
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.