Dockerizing Angular App

What is Dockerizing?

Dockerzing is the process of packing whole app into a single bundle that will be ready to deploy anywhere in any system that has docker got installed.

Let's get started....

Angular is a very popular framework to make single-page applications. I prepared a simple angular app that helps us in making HTTP Requests(GET,POST, PUT, DELETE, PATCH), simply like post man.

Nginx is a popular web-server that serves static content and also it will works as a reverse proxy. Since our web-app contains simple static content, We'll be using the Nginx to serve the static project.

Dockerizing the angular app is so simple with the following steps

• Prepare the Dockerfile in the Angular project directory
• Build the docker image with the following command
• Run the project with the help of image that we created

Preparing the docker file

Copy down the following script and create a new file with name Dockerfile in the root directory of the project.

#stage 1
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist/<app-name> /usr/share/nginx/html

Note: Replace the with your application name

Preparing the image

Use the following command to build the docker image

docker build -t <dockerhub-username>/<image-name>:<version> .

Or if you created the docker file in the other directory replace . with the actual path of the docker file.

After the successful building of the image. We should check if the image got added to the local repository of the docker with the following command

docker images

Now let's deploy the image into a container

docker run -p 8080:80 --name <container-name> -d <dockerhub-username>/<image-name>:<version>

After the successful running of the container we should see the status of the container with the following command and it says Up and running from some minutes/hours.

docker ps

Now if we go to browser and access it with http://localhost:8080 we should see the app running.

Pushing images to Docker hub

We should have a docker hub account and we have to authenticate first. And then go through with the following steps.

1. Login with docker hub docker login.
2. Push the image docker push <dockerhub-username>/<image-name><version>

Summary

We have learnt creating an image of our angular application, running it in a docker container and pushing the image to docker hub.

Thank you for reading the post. Hope the post is beginner friendly and it may helps you. I'm too a beginner :)

Git Repo: git clone https://github.com/TejeshPalagiri/REST-Pilot.git --branch master
Docker Image: docker pull tejeshpalagiri/rest_pilot