Dockerize and run angular Application in an efficient way

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.

How to deploy the Angular application using Docker?

1- Create Dockerfile for the Angular application.

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

Create Dockerfile:

You can create the Dockerfile anywhere. However, create the Dockerfile inside the root your Angular project folder.

# 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

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

Build Docker Image:

Use the following command to generate the Docker image for the Angular application using Dockerfile.

docker build -t angular-app-image .
  • -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.
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
  • -d detaches from a container (running in the background)
  • -p 80:80 maps network ports
  • Finally, the image name is always last :).
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.

node_modules
npm-debug.log
.git
.gitignore
dist

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.

--

--

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.