- Azure
- Azure DevOps
In this article I would like to share with you a list of quick tips that I personally find useful when developing Azure DevOps extensions. Probably, this will help you save some time while debugging or publishing your extension.
To develop your Azure DevOps extension it is recommended to start by following the official Microsoft documentation; it contains illustrative examples which makes it a very good start. Feel free to checkout the official Git repository to see how the current tasks were built.
When you develop an Azure DevOps extension you use Typescript. The Typescript will be transpile into Javascript using the tsc command line. This command will compile all your .ts files in your project and generate a js file for each one. What is interesting about Typescript is that you can use all the npm packages you need!
It is always recommended to compile your own extension locally to test its results during developing period. If your task needs to have some variable as entry point you need to export it.
To do that, the basic steps are:
.js file generatedThis is repetitive and time consuming process. To resolve this problem it is recommanded to create a script. A real example for that is a Shell Script that contains all your variables, compiles and executes your extension. You will find below an example of a script; kindly notice that the variable are export for a Mac the Windows syntax is available on Microsoft documentation:
export INPUT_SourceFolder="./../samples/icons" &&
export INPUT_Contents="**/*.png" &&
export INPUT_BannerVersionNamePosition="bottomRight" &&
export INPUT_BannerVersionNumberPosition="none" &&
export INPUT_BannerVersionNameText="mvp" &&
export INPUT_BannerVersionNameColor="#C5000D" &&
tsc &&
node launch-icon-badge.js
The benefits of this file are:
When you want to access specific file in your Azure DevOps extension such as font you can load it directly using a relative path like this:
'./my_font.ttf'
However, this would work locally but if you deploy your extension in the Azure DevOps environment it will neither work and it will tell you that your file is not found. To resolve this problem you need to use absolute path. To do that just load your file like this:
path.join(__dirname, 'my_font.ttf')
It will work locally and online.
To generate a package for your extension it’s always the same thing you need to: install the npm packages, build and generate the .vsix file. You will also need to update the version inside the vss-extension.json. Here is an example:
cd myFolderTask
npm install
tsc
cd ..
tfx extension create --manifest-globs vss-extension.json
You can optimize this script to modify the version of your extension, by dynamically change the version key inside the vss-extension.json file.
Your extension should be uploaded online in order to test it in a pipeline manner. It is recommended to do your tests by publishing your extension in private mode. So you can do all your development safely. To do that just specify it inside your vss-extension.json like this:
"public": false
By default your extension status is private but you will need to set the public property to true when you will definitely publish your extension, so it will be already there.
You will then just share with your own organisation to be able to test it. When you do all your testing you will update your extension. I noticed that sometimes my build agent keeps the previous version of my extension instead of getting the new one I recently uploaded. To avoid losing time just remove and reinstall your extension then reshare it with your organisation and you will assure that you are using the correct version.
If you do a task for Azure DevOps you will need to add an icon. The task need multiple images:
icon.svgicon.png with 32x32 dimensionsIf you do not set the dimensions to 32x32 for your icon it will never be displayed inside Azure DevOps.
Hope these tips will help you develop your own Azure DevOps extensions. Also, feel free to checkout my previous tasks available here:
Happy coding!