Set up a CI/CD pipeline for your VSTS extension


We receive a notification that there’s a pull request to review for our Team Services extensibility project. We discuss the proposed changes as a team, eventually merge the new feature(s) into the master branch, and close the pull request. Done … right?

Not quite. The merge triggers our automated CI/CD pipeline, which consistently builds and delivers our package to the Visual Studio marketplace.


image


If you’re interested in how we configured our Folder Management extension pipeline or looking for options to configure your own, you should read on.


MODIFIED 2017.08.14 – Update to align with latest codebase from https://github.com/ALM-Rangers/Folder-Management-Extension


Let’s walk through the configuration of our pipeline.



image_thumb8_thumbBuild

We start with the continuous integration build, made up of seven steps, as shown.

SNAGHTML41bb16

image


# BUILD STEP BUILD SNIPPET WHAT’S HAPPENING?
1 Install npm dependencies SNAGHTML21c3ab4c

SNAGHTML21eae9dd
Install all modules listed as dependencies in package.json.
       
2 npm custom SNAGHTML43551f

Run a custom npm task (install –g whitesource) to install the Whitesource npm plugin.
       
3 Replace tokens in Whitesource config

SNAGHTML50317a

We replace the WhiteSourceAPIKey in the whitesource.config.json file with the value of the variable with the same name. Token Regex is “__(\w+)__”, which means that we’re looking for one or more letter, digit or underscore characters, surrounded by a double underscore “__name__”.

     
4 Replace tokens for TelemetryClient SNAGHTML21c47d32

SNAGHTML21d97d7a


We replace the INSTRUMENTATION key in the TelemetryClientSettings.ts file.

Variables

  • INSTRUMENTATIONKEY defines the Application Insights instrumentation key. We’re using a variable to ensure we do not leak the instrumentation key into the OSS repo.
  • system.debug can be set to true for detailed and verbose logging during the build.


       
5 Run whitesource SNAGHTML51ba7c Run the Whitesource tool to scan and detect security vulnerabilities, problematic OSS licenses and quality issues. See Manage your open source usage and security in your pipeline for details.
       
6 npm run build SNAGHTML53729c Run the package build script, as defined under “scripts” in package.json.
       
8 Package Extension SNAGHTML21c712c1

We package the extension using the VSTS Developer Tools Build Tasks extension and generate the output.vsix artifact.

Extension ID is appended with Alpha to differentiate it from deployed DEV, BETA, and PROD packages.

       
8 Publish Artifact SNAGHTML21c77e5c We publish the artifact, output.vsix, to $(Extension.OutputPath) to be picked up by the release.


What about automated testing? We’re intentionally keeping this pipeline simple. We’ll cover automated unit testing and code coverage in the “Set up a CI/CD pipeline with unit testing and code coverage for your Team Services extension” post.


Release

Next we continue with continuous delivery (CD), made up of three simple environments.

Continuous Delivery is the ability to use the output from the CI to build and deploy the new known good build to one or more environments automatically (bit.ly/28PWsfk). There is a subtle difference between Continuous Delivery and Continuous Deployment. The latter is to a single environment. A small team might only implement Continuous Deployment because each change goes directly to production. Continuous Delivery is moving code through several environments, ultimately ending up in production, which may include automated UI, load and performance tests and approvals along the way. – Extract from DevOps - Applying DevOps to a Software Development Project

image_thumb11_thumbDEV

The environment with one task is triggered after a successful release creation. image_thumb43_thumb Both the pre-deployment and post-deployment approvals are automatic, ensuring that the development team is always working with the latest version. There’s no manual intervention.

SNAGHTML21af0038

image


# RELEASE STEP BUILD SNIPPET WHAT’S HAPPENING?
1 Publish Extension SNAGHTML21b09251

We publish the extension to the alm-rangers publisher, using the VSTS Developer Tools Build Tasks extension.

  • The input is the packaged extension from the build, output.vsix. 
  • The published private extension is shared with our DEV sandbox-two and used for development and testing.
  • The extension ID is suffixed with DEV to make it simple to identify this extension.



image_thumb12_thumbBETA

The environment with only one task is triggered after a successful deployment to the DEV environment. image_thumb42_thumb The BETA approvals mandate that one of the specified users approve the release, to ensure that a high quality bar can be met. Users typically include the project lead and program manager.

SNAGHTML21af0038

image


# RELEASE STEP BUILD SNIPPET WHAT’S HAPPENING?
1 Publish Extension SNAGHTML21b1c718

We publish the extension to the alm-rangers publisher, using the VSTS Developer Tools Build Tasks extension. 

  • The published private extension is shared with our BETA sandbox-one and used for exploratory and user acceptance testing.
  • The extension ID is suffixed with BETA to make it simple to identify this extension.



imagePROD

The environment with only one task is triggered after a successful deployment to the BETA environment. image The PROD approvals mandate that all of the specified users approve the release, to ensure that we publish the highest quality. Users typically include the project lead, product owner, and program manager.

SNAGHTML21af0038

image


# BUILD STEP BUILD SNIPPET WHAT’S HAPPENING?
1 Publish Extension SNAGHTML21b23880

We publish the extension to the ms-devlabs publisher, using the VSTS Developer Tools Build Tasks extension.  

  • The published extension is public and available on the marketplace.


That’s it! Consistent and simple!

Now that you have an understanding of how our pipeline works, you should explore how you can configure your continuous integration and delivery pipeline by #RubDevOpsOnIt. In the next post, we’ll take a look at our more complex Countdown Widget pipeline, which includes unit testing and code coverage.

Other pipelines examples

image16272image62image112image5[1]

Reference Information

DevOps - Applying DevOps to a Software Development Project, VSTS Developer Tools Build Tasks

Comments (0)

Skip to main content