Steps to Deploy Angular application on Kubernetes

Introduction:

A little bit of background. I work at a company called MayaData (www.mayadata.io) who develops a very cool open source software called OpenEBS (CNCF Sandbox project) that simplifies the deployment of stateful applications on Kubernetes. You should check it out at www.openEBS.io. I work with Kubernetes and Angular applications on a daily basis and thought that sharing some insights could be useful.

Angular is a JavaScript framework for building web applications and apps in JavaScript, HTML, and TypeScript, which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser.

In this tutorial, we will create a basic angular app, Write docker file to build a compressed angular app and then create deployment manifest for angular application.

Prerequisite:

Angular: A little knowledge of angular

Nodejs: To run the application locally we need node environment

Docker: Docker CLI should be installed in your system to build and push the image. you can also setup ci tool to build the docker image, will talk about that is next tutorial

Nginx: Basic knowledge of Nginx configuration.

Kubernetes: Kubernetes is an orchestration tool, where we will deploy the application, for the demo sake you can use minikube also

What we will do:

1: Create an Angular application

2: Write custom Nginx config

3: Write a multistage docker file

3: Create a K8s deployment manifest and service manifest

4: Test the application

Step 1: Create an Angular application

Now, let’s create an Angular Application, by running the below command angular will creates and initializes a new Angular app, that we will use it deploy.:

ng new spa-demo

After completion of above command go inside the directory

cd spa-demo

Run the development server

ng serve

Now, visiting http://localhost:4200/, you will see…

Continue Reading the complete article in MayaData’s blog.