CI/CD Pipeline for Angular2 with VSTS.

“Zero touch testing and deployments” is a common DevOps mantra for your continuous integration and continuous deployment (CI/CD) pipeline. Also for you frontend projects.

In this post a how to use and configure Visual Studio Team Services for this CI/CD practice on Angular2 projects. Continue reading and/or watch this overview video:

The Angular2 Project.

The time where you simply had to copy a JavaScript file to a server is over. There are many steps to take to prepare an Angular project for production. With TypeScript we need some compiling, we need to make it work for many versions with Shims, the JavaScript files needs to get bundeled, uglified, minified, validated and so on… and, we need to test the script on quality with unit-tests, UI-tests and coverage.

The heavy lifting and thinking of setting up all these libraries and tasks is already done by the contributors of this Angular2 Seed project.

image

After cloning this GitHub project getting it up and running in VSTS is easy. First run it local and make sure you have Java installed for Selenium.

Setup Visual Studio Team Services.

GIT and GitGFlow

After creating a VSTS account and a scrum project with GIT as versioning system, you can configure the branches with policies. See: Gitflow and VSO branch policies use them together and the VSTS documentation.

Build Agent

For the build system you need to create a custom build agent, during the build there is interaction with the UI and I use the Chrome browser for testing.

A perfect place to host this Build Agent VM is in Azure DevTest Labs. It takes care of the artifacts needed on the Build Agent and the schedule to start stop the VM. See this Channel9 video (in Dutch) and this Post.

image

The build agent is configured to run interactively, to make sure interaction with the UI is allowed. To make sure all the PATH variables are correct I start the Build Agent via the Node Command Line.

image

And also make sure Java is installed for running selenium.

Builds.

Per branch two builds are configured, one which is activated by the Pull Request Branch Policy and the other at Integration when a Pull Request is approved. Four builds per Git repo (at start).

image

The CI build activates the deployment of the Angular2 App and has some more steps, like packages and run UI test. For the PR Build a minimal set of steps is configured, to make the build execute as fast as possible.

The PR Build has the steps to build the solution and run the unit tests in the project.

image

These steps are executed via the NPM Test command, which executes the Gulp Test task.

image

image

This is all default available in the Seed Project, only one additional task and customization is done for getting the Unit Test results in VSTS. In the karma.conf.js a trx reporter is added for output to trx.

image

And in the VSTS Build this output is published to VSTS.

image

This will make the Unit Test results appear in VSTS.

image

The CI Build has some more steps, next to the Get Deploy Tools (see next paragraph) and the Unit Test execution it also builds the Angular2 Project and makes it deployment ready.

image

This Build production activity is also already baked in the Angular2 Seed project in the GulpFile.ts.

image

Next the Gulp e2e task (also already there) will execute the Selenium Protractor UI tests. Also here only one customization is done to get the result in VSTS. The jasmine-trx-reporter is added as a report.

image

Which is published in VSTS via the Publish test result step.

image

Deploy the Angular2 App.

The Angular Application will land on Azure Web Apps. After creating this Web App via the Azure portal (normal done with ARM) and the three deployment slot (dev, test and staging), the deployment via VSTS Release can be configured.

For the deployment the published build artifacts from the CI build are used. As a deployment mechanism MSDeploy is used via PowersHell, where the parameters are coming from the PublishSettings file, downloaded from the Azure Portal.

cmd.exe /C $("msdeploy.exe -source:IisApp='$wwwroot' -dest:IisApp='$websiteName',computerName='https://$publishURL/msdeploy.axd',userName='$userName',password='$password',authtype='Basic',includeAcls='False' -verb:sync -enableLink:contentLibExtension -enableRule:AppOffline -retryAttempts:2")

This PowerShell file is made available for VSTS release via the build step GetDeployTools. The powershell script requires two parameters, the PublishSettingsFile and the build drop location.

image

Per Git repo there are two release activities, one for the develop branch and one for the master branch. The develop branch only pushes releases to the development and test deployment slots and the master release also to the staging and production after approval.

image

And all of this results in a nice controlled CI/CD release pipeline, and again the heavy thinking and work already is done by the contributors of the Angular2 Seed project.

Add comment