Visual Studio product team has done a great job developing Visual Studio Team Service and TFS to be extensible. They made it a complete platform for extensibility, bringing several ways to improve the current capabilities by developing extensions. This is why they provide a great Marketplace where developers, either individuals or companies, can develop their extensions and publish them.
If you are an individual or a company interested in developing Visual Studio Team Service extensions and would like to know and 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 it’s 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 of DevOps and the big picture but still at a high-level view.
I have created a video series on how to do that step by step as follows:
- Part 0: Introduction and the table of content
- 1: How to create VSTS Publisher Id for Continuous Delivery
- 2: Develop your extension as a normal front end (SPA) HTML/CSS/JavaScript
- 3: Download and use VSS SDK for your VSTS extension
- 4: VSS manifest JSON file
- 5: Package VSTS extension using TFS Command Line Interface tfx-cli
- 6: Upload, share, and install VSTS extension
- 7: Configure Continuous Integration and Continuous Delivery Pipeline with VSTS
- 8: Some errors and notes while creating VSTS extension and its Continuous Integration and Continuous Delivery
- Conclusion
Part 0: Introduction and the table of content
In this video, I give an overview of all the videos and connect all the videos together with the complete idea.
Part 1: How to create VSTS Publisher Id for Continuous Delivery
To deploy extensions to the Visual Studio Team Service Marketplace, you need a Publisher Id. In this video, I explain how to do that, the difference 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 a normal front end (SPA) HTML/CSS/JavaScript
The second part is how to develop the extension. In this video, I show how to do that with primitive languages. I mean just using 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
In this video, I show how to use the 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 show how to reference it and how to use it inside your code. 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
The VSS extension manifest file is a JSON file where we keep all the metadata 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 show the next step. After we prepared all the resources, we just need to package the VSTS extension by putting all the files in one file with a VSIX extension. We need to download and install the TFS Command Line Interface (tfx-cli), a cross-platform command line tool that 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 show how to upload the Visual Studio Team Service extension to the publisher Id and how to share it with a specific account and install it. This video is very important to understand the difference between private and public VSTS publisher Id and what it means to publish an extension to the VSTS Marketplace.
Part 7: Configure Continuous Integration and Continuous Delivery Pipeline with VSTS
This video is the master scene of this series :) It explains the main idea of how to configure a Continuous Integration (CI) and Continuous Delivery workflow and pipeline. It shows how to implement some of the main and major practices of DevOps with Visual Studio Team Services Build and Release Management. It shows how to create a build definition and use build VSTS extension and publish the artifacts of the build, which will be available for Release Management. It also shows how to create a release definition and how to create different staging environments, and how to put tasks to automate the deployment including picking up the build and promoting it 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 Continuous Integration and Continuous Delivery
In this video, I show 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 explains how to develop VSTS extension and how to configure a Continuous Integration (CI) and Continuous Delivery pipeline, but we can still take the whole principles with developing any other application. 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?