Using Docker to Deploy Angular Universal (SSR) Application to Kubernetes

Angular Universal + Docker + Kubernetes

In this post, I’ll explain the process of Using Docker to deploy Angular Universal (SSR) Application to Kubernetes. However, we’ll be using Minikube since we’ll be testing locally, and in another post, I’ll explain the deployment to Google Kubernetes Engine.

1. Setting up an Angular Application
2. Adding Angular Universal
3. Writing Dockerfile
4. Building and Publishing to Docker
5. Setting up Minikube (Kubernetes)
6. Deployment to Minikube

Setting up an Angular Application

You can skip this step if you already have an existing application.

You’ll need Node.js and Angular CLI installed in your local development environment. See the official website of angular for more instructions.

Create a folder and open up your terminal in that directory then run the command below. You’ll be prompted “would you like to add Angular routing? (y/N)” enter y. The next prompt will ask “which stylesheet format would you like to use?”. I prefer using SCSS so you can use the arrow key to SCSS and press enter.

ng new angular-docker-kube

You should have the following folder and files created

Change your working directory to the root folder (angular-docker-kube) and run the following command

cd angular-docker-kube && npm run start

Open a new tab in your browser and enter the URL, your Angular Live Development Server should be listening on localhost:4200.

You should have something like this!!!

Now, let’s enable Server Side Rendering (SSR) for our application by running the following command in our root folder see the official site or blog for more explanations. You’ll be prompted “The package @nguniversal/express-engine@12.1.0 will be installed and executed.” enter y.

ng add @nguniversal/express-engine

As you may be aware the benefits of using Angular Universal in our project are to improve the startup performance of our application, and also for Search Engine Optimization. We wouldn’t discuss this deeply here but for further reading, you can check out this blog. For this illustration, we’ll be using the default page for our SSR as shown in the image below. You can add other pages that your need to render on the server side in the route array.

angular.json

Open the package.json file to see the available commands

package.json

npm run prerender && npm run build:ssr && npm run serve:ssr

We can now open up the application on http://localhost:4000/

Angular Server Side Rendering

Writing Dockerfile

Create a file named Dockerfile in the root directory of the project and paste the following code

FROM node:14 as builder

WORKDIR /app

COPY package.json .

COPY package-lock.json .

RUN npm ci

COPY . .

EXPOSE 4000

RUN npm run build:ssr

CMD [ “npm”, “run”, “serve:ssr” ]

Building and Publishing to Docker

If you don’t have a docker account please create one here.

Now, open your terminal in your root directory and login to docker, and enter your credentials on the prompt using:

docker login

Make sure you’ve saved the changes in Dockerfile and enter the code below:

docker build -t yourusername/yourbuildname .

For the purpose of this blog, I’ll be using:

docker build -t dasuja/angular-ssr-kube .

docker push dasuja/angular-ssr-kube

Make sure you don’t forget the last dot!!!

Setting up Minikube(Kubernetes)

If you don’t have Minikube installed on your machine, see this instruction on how to install it.

So we’ll be using VirtualBox to start our Minikube using the following command, and you can get the instructions on how to install VirtualBox here:

minikube start — vm-driver=”virtualbox”

Next, we’ll be creating a Kubernetes folder in our root directory, and creating two files ui-deployment.yaml and ui-service.yaml.

ui-service.yaml

ui-deployment.yaml

Deployment to Minikube

From the kubernetes directory, enter the following commands to deploy the Service and the Deployment.

kubectl apply -f=ui-service.yaml

kubectl apply -f=ui-deployment.yaml

Then,

minikube dashboard

If everything goes well you should see ->

Minikube dashboard

In order to test the application, get the local URL using

minikube service angular-ssr-kube — url

Enter the output url in your browser and viola!!!

Using Docker to Deploy Angular Universal (SSR) Application to Kubernetes

Conclusion

We’re able to deploy our Angular Universal to Kubernetes using Docker. In a future post, I’ll explain how to deploy to Google Kubernetes Engine.

The full code is here!