Dockerize and run angular Application in an efficient way

Learn how to create a Docker image for your Angular Application using Dockerfile.

Agenda

  • Introduction
  • A short introduction to Angular.
  • Create Angular Project.
  • Create Dockerfile.
  • Build Docker Image.
  • Run the image.
  • Make our image more efficient.
  • Conclusion

Introduction

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.

Both 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 outputPath in angular.json..

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.

Note

you should install node and angular On your pc, you can install nodefrom here and angular CLI from here

ng new docrize-angular-app

This project is created just for demonstration purposes. Skip this section if you already had an Angular project.

Create Dockerfile:

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
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY . /app/
RUN npm run build --prod

# second stage
FROM nginx:alpine
COPY --from=build /app/dist/docrize-angular-app /usr/share/nginx/html

Let’s break that code down.

First stage

  • 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 -p create a new directory if it doesn’t exist, -p means create the directory if it doesn’t exist otherwise will not create it.
  • WORKDIR setting default work directory.
  • COPY copying package.json file 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).
  • COPY copying all remaining files with a source code.
  • RUN and finally compiling our app.

Second stage

  • FROM nginx:alpine getting 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=build copy 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.

http://localhost:80/ or http://ip_address:80/

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 node_modules , npm-debug.log, .git, .gitignore and distdist folders, because they’re not needed in a compilation.

Therefore this file should look as follows:

node_modules
npm-debug.log
.git
.gitignore
dist

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)

Conclusion

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.

Let’s connect on LinkedIn, Twitter

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 🙂.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdlrahmansaber

Abdlrahmansaber

Software engineer, Problem solver, Geek.