Dockerize and run angular Application in an efficient way
Learn how to create a Docker image for your Angular Application using Dockerfile.
- A short introduction to Angular.
- Create Angular Project.
- Create Dockerfile.
- Build Docker Image.
- Run the image.
- Make our image more efficient.
In this blog post, I would like to show you how to run your Angular application in a Docker container, by writing a multi-stage Docker build that will make the container smaller and your work more automated.
A short introduction to Angular:
Angular is a very popular platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications. Angular is developed and maintained by the Google team.
How is the Angular application deployed on the cloud server?
When you are ready to deploy, however, you must use the
ng build command to build the application and deploy the build artifacts elsewhere.
ng build and
ng serve clear the output folder before they build the project, but only the
ng build command writes the generated build artifacts to the output folder.
The output folder is
dist/project-name/by default. To output to a different folder, change the
so now we know how we generate dist files next step is to copy the files in the dist folder to the cloud hosting(Which runs under Apache or Nginx). It is just simple copy-paste work of Angular dist files to the cloud server.
How to deploy the Angular application using Docker?
1- Create Dockerfile for the Angular application.
2- Build and tag image from the Dockerfile.
3- Run the Angular application as a container using the Docker run command.
Create Angular Project:
Use the following command to create an Angular application.
ng new docrize-angular-app
This project is created just for demonstration purposes. Skip this section if you already had an Angular project.
You can create the Dockerfile anywhere. However, create the Dockerfile inside the root your Angular project folder.
Create a file named Dockerfile and paste the below code.
# first stage of building angular image
FROM node:slim as build
RUN mkdir -p /app
COPY package.json /app/
RUN npm install
COPY . /app/
RUN npm run build --prod
# second stage
COPY --from=build /app/dist/docrize-angular-app /usr/share/nginx/html
Let’s break that code down.
FROM node:slim as buildgetting Node Docker image from the registry and naming the compilation stage as
build(so we will be able to refer to it in another stage). Check the node image from here
RUN mkdir -pcreate a new directory if it doesn’t exist,
-pmeans create the directory if it doesn’t exist otherwise will not create it.
WORKDIRsetting default work directory.
package.jsonfile from local root directory - this file contains all dependencies that our app requires,
RUN npm installinstalling necessary libraries (based on a file copied in the previous step).
COPYcopying all remaining files with a source code.
RUNand finally compiling our app.
FROM nginx:alpinegetting Nginx Docker image from the registry. Check the node image from here
COPY ...Copy the compiled application (we did it in the first stage) to the container.
--from=buildcopy compiled files from the build stage (also the source path has changed because files are located in a different folder).
If you are using your own Angular project then change the application name docrize-angular-app in the last line to your application name. Rest of the code works fine with any Angular application if you place the Dockerfile in the root of the Angular project.
Build Docker Image:
Use the following command to generate the Docker image for the Angular application using Dockerfile.
docker build -t angular-app-image .
We passed two arguments to build
- -t angular-app-image gave Docker a tag for the image. Since we only supplied a name, we can see that Docker tagged this build as the latest in the last line of the build output. We’ll look more closely at tagging below.
- The final argument, dot (or “.”), told Docker to look for the Dockerfile in the current working directory.
When we list images, we can see angular-app-image:
docker image ls
Run the image
Next, we run our Angular application using the following command.
docker run -d -p 80:80 angular-app-image
Let’s break the command down:
- -d detaches from a container (running in the background)
- -p 80:80 maps network ports
- Finally, the image name is always last :).
It runs on port number 80. Access the Angular application using the IP address and port number.
Make our image more efficient
To make building our Docker image even more efficient we can add to the project’s root an additional file called
.dockerignore . This one works similar to .gitignore and in it, we can define what files and folders we want Docker to ignore. In our case, we don’t want to copy any files from
distdist folders, because they’re not needed in a compilation.
Therefore this file should look as follows:
If you want to check this project go to its repository on GitHub, and you’ll all see the docker images that I made tuts about it, check
dockerize-angular-app folder you’ll find the project that is related to this article (dockerize angular app)
GitHub - AbdlrahmanSaberAbdo/Docker-images
Introduction This repo will have different dockerized apps with different frameworks that will update it consistently, I'll…
In this tutorial, you learned how to create a Dockerfile for your Angular application and how to generate the Docker image. And how to make the image more efficient. Docker eases the application deployment by packing needed components in a single image file. This reduces the deployment time. And you can easily scale the application using Kubernetes which is a container orchestration tool.
And that brings us to the end! Thank you so much for reading through this — if this article was helpful in any sense I’d really appreciate a follow to help me reach my 100-follower goal by the end of May 🙂.