Azure Pipelines: How to build and test an Angular and Node.js webapp and deploy it to on-premise VM’s using multiple stages (YAML) – Overview

What is Azure Pipelines?

Azure pipelines is a free continuous integration/continuous delivery tool from Azure Devops (Microsoft). Not only can it deploy to the azure cloud, it can also deploy to self hosted VMs. Even multiple, with multiple stages. For instance, an Acceptance, Test and Production environment. All of this can be done in YAML files.

Why (Azure) Pipelines?

Pipelines are a great way to manage your tests and deployment. It’s all automatic. If you push a commit to for say, master, it will run the tests (you would’ve run manually otherwise) and deploy to your environment automatically. This gives your team trust in deploying, because there’s consistency. It also gives you feedback about the deployment.

Why Azure? It has cloud native support. So if you ever think of switching from on-premise VM’s to the cloud, that’s super easy. This is especially interesting for my project.
Furthermore can it work with almost any language/platform. This makes it easier to change some components of your stack. It is also cross-platform.
At last is the documentation is very good and almost everything can be written in YAML. See also Microsoft’s views on it.

My environment and the requirements

I have three of on-premise VM’s with the following requirements for each environment

• Acceptance – automatic deployment allowed (to see if it just works)
• Test – only manual deployment (final checks before deploying for production)
• Production – only manual deployment

For the frontend I am using Angular 7. For the backend I am using Node.js.
The pipeline has to run the tests made by the developers. The results have to be showed in a dashboard.

The backend and frontend have to be run in the same pipeline, because the backend and frontend are in the same repository. My folder structure looks like this

├──backend
│  ├──node_modules
│  ├──src
│  └──test
└──frontend
   ├──dist
   ├──node_modules
   └──src

Blog posts layout

In the following five blog posts I am going to show how to deploy multiple environments to self-hosted VMs. The posts will be divided into five parts:

1. Using and set up a webapp in Azure Pipelines
2. Build Angular and Node.js webapp in Azure Pipelines
3. Test Angular and Node.js webapp in Azure Pipelines
4. Set up on-premise VM’s using multiple stages in Azure
5. Deploy Angular and Node.js webapp in Azure Pipelines

In the end you will have a pipeline that builds the artifacts in the. The self-hosted VMs will pull those artifacts and deploy them.

The coming days every day a new part will be released at 12:00.