Containerizing Angular App In A Docker Container

Docker:

If you are new to the docker journey go and explore my YouTube channel to watch my YouTube video, where I talked about what is docker and also about the container.

Content List:

Nowadays, it’s very common to dockerize and deploy the Docker image in the production with the help of container orchestration engines such as Docker Swarm or Kubernetes.
In this blog We are going to Dockerize the app and create an image and run it on Docker on our local machine for this, we need to perform the following steps:

Creating Angular Application.
Create Dockerfile in Angular App.
Build Docker image from Docker file.
At the end run containerized Angular Application on docker

Angular.

Before creating angular application we should have some basic knowledge about Angular so, Angular is a platform and framework use to built client side application using HTML,CSS and TypeScript.
Before creating angular application, make sure that Node.js and Angular CLI already installed in your local system.
If you find any difficulty while installing Angular jump at Angular Website.

Creating Angular Application:

Once Nodejs and Angular installed, Execute ng new angular-app command to create angular application in a local directory.

Navigate project' directory and run Angular application using, ng serve command

Create Dockerfile:

A Docker image consists of read-only layers each of which represents a Dockerfile instruction. The layers are stacked and each one is a delta of the changes from the previous layer. Consider this Dockerfile:

FROM – Initializes a new build stage, and sets the latest node image from DockerHub registry as the base image for executing subsequent instructions relevant to the angular app’s configuration. The stage is arbitrarily named as build, to reference this stage in the nodejs configuration stage.
WORKDIR – Sets the default working directory in which the subsequent instructions are executed. The directory is created, if the path is not found. In the above snippet, an arbitrary path of app is chosen as the directory to move the angular source code into.
COPY Package.Jeson - use to copy these files into the Docker file system and install all the dependencies. we need this to build image faster for example You've changed some src.js file, but haven't changed the package.json. You run npm and it looks good. Now you re-run docker build. Docker notices that the package*.json files haven't changed, so it uses the same image layer it built the first time without re-running anything, and it also skips the npm install step because it assumes running the same command on the same input filesystem produces the same output filesystem. So this makes the second build run faster. But if you missed it you need to install all dependencies every time you build image which ultimately slow down the image build process.
COPY – Copies the source files from the project’s root directory on the host machine to the specified working directory’s path on the container’s filesystem.
RUN – Executes the angular build in a new layer on top of the base node image. After this instruction is executed, the build output is stored under /app and the compiled image will be used for the subsequent steps in the Dockerfile

Building Docker Image:

Building efficient Docker images are very important for faster downloads and lesser surface attacks. Let’s build an image with the Dockerfile. so for this, open up a command prompt and navigate to the location of your Dockerfile in your project’s directory.
Execute the following command to build the docker image.

docker build -t angular-app:latest "."
In the above command as you see . is placed at the end of the command which shows that Dockerfile is present in the current working directory. but if in your case it's not present in the current working directory you can specify the path of Dockerfile at the end of the command.

Watch the demo live| Subscribe to my channel

Conclusion:

Docker virtualization is indeed an incredible technology. It can be used to virtualize almost any sort of application. Angular is mainly used to develop frontend web designs.
In this article we learned how to create Docker file, how to build docker Image from it and after this how to run containerized Angular Application.
Hopefully this article helped you to running a simple Angular application on Docker.