Set up a CI/CD pipeline for your Team Services 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.

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.

SNAGHTML21ae246e

image

 

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

SNAGHTML21eae9dd
Install all modules listed as dependencies in package.json.
       
2 Initialize npm SNAGHTML21c4094a

SNAGHTML21ed3d24
Run the package setup script, as defined under “scripts” in package.json.
       
3 Replace tokens in TelemetryClient SNAGHTML21c47d32

SNAGHTML21d97d7a

 

We replace the INSTRUMENTATION key in the TelemetryClient.ts 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__”.

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.
       
4 Build solution SNAGHTML21c64242 We build the extension, as outlined by the FolderManagement.sln solution file.
       
5 Whitesource SNAGHTML21c6a9a7 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 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.

       
7 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

image1627image6image[1]

Reference Information

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

Comments (0)

Skip to main content