Visual Studio Team Service (VSTS) extensions are simple addons that enhance VSTS functionality and experience. The Visual Studio product team has done a great job in developing the Visual Studio Team Service (VSTS) and TFS extension program. They have designed it as a complete platform for extensibility which brings with it several ways to improve current capabilities by developing extensions and providing a great Marketplace where developers, either individual or companies, can develop their extensions and publish them.

If you are an individual or a company interested in developing a Visual Studio Team Service (VSTS) extension and would like to know how to follow the best practices for DevOps, Continuous Integration and Continuous Delivery, this post is for you. This step by step video guide will explain this process of how to create VSTS extensions and configure them. The videos and the processes for these are developed and explained by Mr.Mohamed Radwan, Microsoft MVP and DevOps specialist.

You can find more info about DevOps in the chapter titled “DevOps: The Three-Stage Conversation – People, Process, Products” which will give you an idea about DevOps if you are new to the concept. If you would like more depth you might want to look at the “Quick guide to Basic Principles of DevOps” which will give you an overview on DevOps as well as the bigger picture but still at a high-level view.

Part 0: Introduction and the Table of Content

The introductory video will give you an overview of the entire process, connecting all videos to present a complete idea on how to develop VSTS Extensions.

Part 1: How to create VSTS Publisher ID for Continuous Delivery

To deploy your extension to the Visual Studio Team Service Marketplace, you will need a Publisher ID. In this video, you will see how to create the VSTS Publisher ID for continuous delivery. You will also see an explanation on the differences between different Visual Studio Team Services publisher IDs, private and public, individual and company. More information about this is available here.

Part 2: Develop your extension as normal front end (SPA) HTML/CSS/JavaScript

After creating the ID you can now commence developing the extension. In the second video, you can see how this is done with the help of “primitive” languages, that is, JavaScript, HTML and CSS. As you can see, we haven’t even used Typescript. This is to demonstrate that Typescript or others aren’t really necessary but it is just good practice doing so.

Part 3: Download and use VSS SDK for your VSTS extension

The next step is how to use the Visual Studio Services Web Extension SDK or VSS-SDK, which is a JavaScript library, to load your extension in Visual Studio Team Service (VSTS). Through the part 3 video, you can also learn how to reference it and how to use it inside your code. For more information, please visit the links below.

https://github.com/Microsoft/vss-web-extension-sdk

https://www.npmjs.com/package/vss-sdk

Part 4: VSS manifest JSON file

Part four deals with how the VSS extension manifest JSON file is to be configured. The JSON file is where all the metadata about our extension, that is, the version, all the resources, CSS, images, JavaScript, etc are manifested. It also includes the logo, the publisher Id and many others. More information can be found here.

Part 5: Package VSTS Extension Using TFS Command Line Interface tfx-cli

The next step after preparing all the resources is to now package the VSTS extension by combining all the files into a single package file with a .vsix extension using the TFS command-line interface (tfx-cli) tool, a cross-platform command line tool that needs to be downloaded and installed. Click here to know more about the tool.

Part 6: Upload, Share and Install the VSTS Extension

Part 6 will show how to connect the Visual Studio Team Service extension to the publish Id and how to share it with a specific account and to install it. This video is very important in order for us to understand the difference between private and public VSTS publisher Ids and what it means to publish an extension to VSTS Marketplace.

Part 7: Configure Continues Integration and Continues Delivery Pipeline with VSTS

This is the main component of this process. The part 7 video will explain the main idea of how to configure Continuous Integration (CI) and the Continuous Delivery (CD) workflow and pipeline. It will also show the following:

• How to implement some of the main and major practices of DevOps practices with Visual Studio Team Services Build and Release Management.
• How to create build definitions
• How to use build VSTS extension and publish the artefacts of the build to be available for Release Management.
• How to create release definitions and how to create different staging environments
• How to put tasks to automated the deployment including pick up the build and promoting to different environments with request and approval process.

If you would like to focus more on Release Management, you can look at the video Release Management and Build Automation with TFS/VSTS which will give you a full end to end example of how to use Release Management.

Part 8: Some errors and notes while creating VSTS extension and its Continues Integration and Continues Delivery

This video is an appendix and a troubleshooting guide that explains some issues that cropped up while creating the extension and how those errors were fixed.

The intent of this chapter was to explain how to develop VSTS extensions and how to configure Continuous Integration (CI) and Continuous Delivery pipeline. We can still take the whole principles of developing any other application as a tool is just an implementation of the concept behind the idea (practices) and VSTS is the best tool to implement software practices. Happy VSTS and Happy DevOps.

This post was originally published on mohamedradwan.com at Develop VSTS Extension and Configure CI (Continuous Integration) and CD (Continuous Delivery Pipeline)