Dockerizing Angular App

Tejesh Palagiri — Thu, 26 Jan 2023 10:52:12 +0000

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.

Login with docker hub docker login.
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

How I made a URL shortener app -> From making To deployment

Tejesh Palagiri — Thu, 21 Oct 2021 13:30:13 +0000

Shortbit

The name of the app we created is Shortbit. This is pretty simple application that makes a long URL into a short URL and gives more in-depth insights of the link clicks and all other stuff such as the number of clicks, links shortened, from where the link is being clicked, which browser, referrer channel etc. These all things are visualized graphically.

Tech used

All the tech used for this app is MEAN stack
MongoDB used for storing data of users, short URLs and some other stats.
Redis used for maintaining user sessions.
Amazon SQS helped in counting stats.
Angular for front-end and all other normal stuff.

Behind scenes

All the implementation is pretty simple. Same as other URL shortener apps finds the long link with the given short link code and redirects the user to the long link.

But after redirecting how can we count the stats like country, referrer channel, browser, device and other stats ?

At first we made this as a simple project that doesn't counts any stats and it just redirects the user.

After then we implemented counting stats logic with some known modules of NodeJS for processing a request and storing the stats. All this logic went well but when there are a huge number of requests server stopped working and again we need to restart the app.

After then we tried to implement a message broker that holds the request data in a queue and then a micro service pick each item from the queue and consumes it and updates the related stats data.
We searched for a free service provider of Message Broker service. Unfortunately we didn't find any provider that goes with a free plan.

Then Amazon SQS helped us to make the requests save in the queue and helped the consumer microservice to consume the requests in the queue and updated the stats.

Deployment

As the idea of the app is completely free. We hosted the whole back-end part of the app in Heroku. And tried of serving front-end also from back-end heroku dyno, but it costed us more in consuming the free dynos. So for front-end used Netlify. For hosting a single page application we need to make necessary changes such that we won't face any issues after reloading a page.

Conclusion

Please feel free to check the app we made. It's just a simple project that helps us to know and develop more deeper insights in creating any applicaiton.
Thanks for reading !!!

DEV Community: Tejesh Palagiri