Develop VSTS Extension and Configure CI (Continuous Integration) and CD (Continuous Delivery Pipeline)

 

Visual Studio product team has a great job developing Visual Studio Team Service and TFS to be extensionable, they made it as a complete platform for extensibility which brings several ways to improve the current capabilities by developing extensions, this why they provide a great Marketplace where developers either individual or companies can develop their extensions and publish them.

 

So if you are an individual or a company who are interested in developing Visual Studio Team Service extension and you would like to know and to follow the best practices for DevOps , Continuous Integration and Continuous Delivery, this post is for you.

 

You can look at more info about DevOps in my post, DevOps: The Three Stage Conversation – People, Process, Products which will give you an idea about DevOps if you it’s pretty new to you, if you would like more depth but still prefer the high level, you might look at my quick guide about Basic Principles of Devops which will give you an overview about DevOps and the big picture but still in a high level view.

So I have created video series on how to do that with step by step as the following:

 

Part 0: Introduction and the table of content

Part 1: How to create VSTS Publisher Id for Continues Delivery

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

Part 3 Download and use VSS SDK for your VSTS extension

Part 4: VSS manifest JSON file

Part 5: Package VSTS extension using TFS Command Line Interface tfx-cli

Part 6: Upload, share and install VSTS extension

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

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

Conclusion:

 

Part 0: Introduction and the table of content

In this video I am going to give an overview of all videos and connected all videos together with the complete idea

 

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

To deploy extension to Visual Studio Team Service Marketplace, you need a Publisher Id, in this video I am going to explain how to do that, the different between different Visual Studio Team Services publisher Ids, private and public, individual and company, for more info about that see this link:
Package, publish, unpublish, and install VSTS extensions

 

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

The second part is how to develop the extension, in this video I showed how to do that with the primitive languages, I mean just used JavaScript, HTML and CSS, I didn’t even use Typescript to show that you don’t need Typescript or others, it’s just good practices.

 

Part 3 Download and use VSS SDK for your VSTS extension

This video I showed how to use Visual Studio Services Web Extension SDK or VSS-SDK which is just a JavaScript library to load our extension in Visual Studio Team Service (VSTS), I showed how to reference it and how to use it inside your cod, for more info about that see these links:

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

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

 

Part 4: VSS manifest JSON file

VSS extension manifest file is a JSON file where we keep all the meta data about our extension, like the version, all the resources, CSS, images, JavaScript, etc, it also includes the logo, the publisher Id and many others, for more info see the following link:

Extension manifest reference

 

Part 5: Package VSTS extension using TFS Command Line Interface tfx-cli

In this video I am going to show the next step, after we prepared all the resources, we just need to package the VSTS extension, just by putting all the files in one file with VSIX extension and we need to download and install TFS Command line Interface (tfx-cli) it’s a cross-platform command line tool which we can run on any platform, for more info about the command, you can find it here:

https://www.npmjs.com/package/tfx-cli

 

Part 6: Upload, share and install VSTS extension

In this video I showed how to upload Visual Studio Team Service extension to the publish Id and how to share it with specific account and install it, this video is very important to understand the different between private and public VSTS publisher Id and what it does it mean publish extension toe VSTS Marketplace

 

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

This video is the master seen of this movie 🙂  , it explains the main idea of how to configure Continuous Integration (CI) and Continuous Delivery workflow and pipeline, it show how to implement some of the main and major practices of DevOps practices with Visual Studio Team Services Build and Release Management, it showed how to create build definition and to use build VSTS extension and publish the artifacts of the build which will be available for Release Management, it is also showing how to create release definition and how to create different staging environments and 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 my 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

In this video, I am just showing some of the issues I faced and how to fix them, it’s better to show a quick fix for some errors as maybe you will face the same issues.

 

Conclusion:

This post explaining how to develop VSTS extension and how to configure Continuous Integration (CI) and Continuous Delivery pipeline, but we still can take the whole principles with developing any other application as at the end the 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 🙂

 

Good links:

Publishing Extensions for Visual Studio Team Services

Extend Visual Studio Team Services

What are extensions?

Share This: