Set up a really cheap build agent to support NPM 5 and Angular 5 in Visual Studio Team Services

Visual Studio Team Services (VSTS) - I will name it just Team Services - is the best and most powerful tool for work items, code repositories, continuous integration and release management at one place.

Don't worry: the brand "Visual Studio" does not indicate that it is only focused on the Microsoft developer world: Team Services is a platform for any platform, any language - and you can reach it from anywhere.

This blog post shows how to set up a custom build agent to run NPM 5 with package-lock.json support with an Angular 5 sample in your builds.

Init

Team Services offers you unlimited free git repositories and a free area for your work items. All stuff which causes platform load is limited: in the free plan you have 240 minutes/month to execute build and release tasks.

If you need more build/release time you can spend 40€/month for an hosted agent with default capabitilies or you use the private pipeline and attach an agent on your machine to Team Services.

Angular 5 and NPM 5 !

The hosted agent provides capabilities in stable state, like Visual Studio 2017 15.3, .NET Core 2.0 and NodeJS 6/NPM 3.

If you develop with Angular 5 you probably also want to use the latest version of NodeJS and NPM 5 to have the support of package-lock.json.

But: there is no agent with a capability of NPM 5 available right now, because NPM 5 is not part of the latest Node LTS release.

Cheaper: Azure burstable instances

The (really cheap) solution is to set up a custom build server for just 11 Euros per month. Eleven euros! This is no typo! And by the way you now also have unlimited build minutes :-)

A month ago Azure introduced the B-Series of virtual machine sizes.

The B-Series offers a cost effective way to deploy these workloads that do not need the full performance of the CPU continuously and burst in their performance. While B-Series VMs are running in the low-points and not fully utilizing the baseline performance of the CPU, your VM instance builds up credits. When the VM has accumulated enough credit, you can burst your usage, up to 100% of the vCPU for the period of time when your application requires the higher CPU performance.

These VM sizes allow you to pay and burst as needed, using only a fraction of the CPU when you don’t need it and burst up to 100% of the CPU when you do need it (using Intel® Haswell 2.4 GHz E5-2673 v3 processors or better). This level control gives you extreme cost flexibility and flexible value.

Azure Blog: Introducing B-Series, our new burstable VM size

And the price for the smallest B-series VM "B1ms" is just 11.29€ (West Europe)!

Setup up build machine

First you have to create a virtual machine in Azure. You can use the image "Visual Studio 2017 on Windows Server 2016" which is a pre-configured image and really nice as base for a build machine. The cheap size is named 'B1ms'.

This only takes two minutes if you already have an active Azure subscription. Otherwise Azure offers a free trial with 170€ Azure credits.

After the set up of the VM I've updated Visual Studio 2017 to the latest update 15.3, installed Node "current release" (8.6 with NPM 5.3) and also installed an Team Services agent on this VM. You can read the installation instructions here: Deploy an agent on Windows

And there you go: my running build machine:

Performance - ASP.NET Core

But what do you get for just 11€ per month?

My personal blog is running on ASP.NET Core. This is my latest build time on "Hosted 2017" agent:

As you can see it took around 2.4 minutes two weeks ago. Now my 11€ custom build machine:

It took 2.8 minutes (168 seconds) which is not that bad for that small machine!

Performance - NodeJS, NPM and Angular

Back to NodeJS 8.6, NPM 5 and Angular.

I copied the repository https://github.com/tomastrajan/angular-ngrx-material-starter to VSTS. This Angular sample shows the best current stuff in the Angular world in one project.

So I created also a build task for this project:

• npm install
• npm run build:ci

We built an Angular app with NodeJS 8.6 and NPM 5 (with project-lock.json) in just 2.8 minutes on a 11€ machine!

More power, more performance?

I re-sized the B1ms (11€/month) machine to a B8ms (157€/month) and also took two builds:

My ASP.NET Core Blog build took 168 seconds on the B1ms and 47 sec on the B8ms instance.

The large machine is 14.27 times more expensive but builds 3.57 times faster.

The Angular sample project took 2.4 minutes (144sec) on the small B1ms and 91 sec on the larger B8ms

For this project the large machine is 14.27 times more expensive and builds 1.5 times faster.

Conclusion

Visual Studio Team Services is the best platform to rule your software development and DevOps process.

I hope this small blog post gives you an overview to run Angular 5 safe on project-lock.json and NPM 5 on a custom, cheap build machine on Azure connected to your Team Services agent pool.