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. Prerequisites Before you start, you need to install and configure the tools below to create the Angular application and the Docker image. : Git is a distributed version control system and it will be used to sync the repository. git : 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. Node.js and npm : Angular CLI is a command line utility tool for Angular and it will be used to create the base structure of the Angular application. Angular CLI 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. or ): 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. Visual Studio Code WebStorm Getting started Create the Angular application 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. Angular Let's create the application with the Angular base structure using the with the server-side rendering (SSR) disabled, the route file and the SCSS style format. 1. @angular/cli 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. Now we will run the application with the command below. 2. 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/ Ready! Next, we will access the URL and check if the application is working. 3. http://localhost:4200/ Create the Docker image is a software that allows developers to create and run container applications. Docker Let's create the file with the Docker image configuration in the root directory of the Angular application. 1. Dockerfile touch Dockerfile Now we will configure the Dockerfile file with the content below. 2. 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 setting defines the base Docker image. FROM node:alpine The setting defines the default application directory. The defined directory is created if it does not exist. WORKDIR /usr/src/app The setting copies the local application files and directories to the defined directory. COPY . /usr/src/app The setting installs the global command line dependency for Angular. npm install -g @angular/cli The setting installs the Angular application dependencies. RUN npm install The setting creates and runs the Angular application for external access. CMD ["ng", "serve", "--host", "0.0.0.0"] Next, we will create the image with with the command below. 3. docker build -t angular-docker . After create the image, we will check if the image was created with the command below. 4. docker images
REPOSITORY       TAG      IMAGE ID       CREATED          SIZE
angular-docker   latest   73bfa0093a57   10 seconds ago   463MB Ready! The Docker image with ID and 463MB was created. 5. 73bfa0093a57 Run the Docker container Let's run the Docker container using the image created of the Angular application with the command below. 1. docker run -p 4201:4200 angular-docker Now we will check if the container is running with the command below. 2. 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 Ready! Next, we will access the URL and check if the application is working inside the Docker container. 3. http://localhost:4201/ 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 in portuguese. blog To stay updated whenever I post new articles, follow me on and . Twitter LinkedIn

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Creating and Running an Angular Application in a Docker Container

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Hosting an Angular application on GitHub Pages using GitHub Actions

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Hosting an Angular application on GitHub Pages using GitHub Actions

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps