Building own extensions for Azure DevOps

1. Creating own
Extensions for Azure
DevOps
Christian Waha / Technical Fellow
Zürich, Februar 2021
ti&m DevOps

2. ti8m.com
ti&m AG
Zürich
Buckhauserstrasse 24
CH-8048 Zürich
+41 44 497 75 00
ti&m AG
Bern
Monbijoustrasse 68
CH-3007 Bern
+41 44 497 75 00
ti&m GmbH
Frankfurt am Main
Schaumainkai 91
D-60596 Frankfurt am Main
+49 69 247 5584 20
ti&m Pte. Ltd.
18 Robinson Road #15-16
Singapore 048547
Singapore
+65 6955 7755
About me
Christian Waha – Technical Fellow
Technical Fellow @ti&m AG
Microsoft Most Valuable Professional
Microsoft Regional Director
LEGO Serious Play Certified Facilitator
Linkedin Learning Trainer
Azure Meetup Munich Organizer

3. 20.02.2021
3
Du möchtest…
… Teil der nächsten IT-Revolution sein?
… Dich mit modernster Technologie beschäftigen?
… mit uns etwas Neues aufbauen?
… in einer Firma mit starken Werten und Kultur arbeiten?
Dann suchen wir genau Dich!
Bewirb Dich auf eine unserer offenen Cloud Stellen:
 Cloud Architekt (Azure, Google Cloud Platform, AWS)
 Cloud Ingenieur (Azure, Google Cloud Platform, AWS)
 Microsoft Azure Solution Engineer
Sende Deine Bewerbungsunterlagen direkt an
christian.waha@ti8m.ch.
Wir freuen uns auf Dich!
Mehr Infos auf www.ti8m.ch
Wir suchen Dich als
Cloud Experten!

4. Tasks Overview
Creating Custom Build Tasks
File Structure
Azure DevOps Marketplace
20.02.2021
4
Agenda

5. Overview
20.02.2021
5
Extensions are add-ons you can use to customize and extend your DevOps experience with Azure DevOps. They're written with standard technologies
- HTML, JavaScript, CSS - and are developed using your preferred development tools. Extensions use our RESTful API Library to easily interact with
Azure DevOps and applications/services. The Visual Studio Marketplace is where extensions are published. They can be kept privately for you and
your team or shared with the millions of developers currently using Azure DevOps.
What can you do with extensions?
There are dozens of places where you can add to the user interface, and we're adding more every sprint. Learn about all of the places where you can
add a hub in the contributions reference.
 Provide new Azure Pipelines tasks that teams can use in their builds.
 Use dashboard widgets to get custom views within Azure DevOps.
 Extend the work item form with new tabs, sections, and actions.
 Create your own hub to embed new capabilities within our Agile, code, build, and test experiences.
 Develop actions that can be run on hubs, whether they're ours or ones you've created.
Create DevOps Extensions

6. Tasks Overview
Creating Custom Build Tasks
File Structure
Azure DevOps Marketplace
20.02.2021
6
Agenda

7. Create a custom Build Task
20.02.2021
7
Create task scaffolding
The first step is to create the folder structure for the task and install the required libraries and dependencies.
Create a directory and package.json file
First from within your BuildAndReleaseTask folder run:
npm init
Npm init creates the package.json file. You can accept all of the default npm init options.
Add azure-pipelines-task-lib
Microsoft provides a library, azure-pipelines-task-lib, that should be used to create tasks. Add it to your library:
npm install azure-pipelines-task-lib --save
Create DevOps Extensions

8. Create a custom Task
20.02.2021
8
Add typings for external dependencies
Ensure that TypeScript typings are installed for external dependencies
npm install @types/node --save-dev npm install @types/q --save-dev
Create a .gitignore file and add node_modules to it. Your build process should do an
npm install and typings install so node_modules are built each time and don‘t need to be checkedin.
echo node_modules> .gitignore
Create tsconfig.json compiler options
This file makes sure that our TypeScript files get compiled to JavaScript files.
tsc --init
In addition, for this example we want to compile to the ES6 standard instead of ES5. To ensure this happens, open the newly generated tsconfig.json and update the target
fieldto "es6".
Create DevOps Extensions

9. Tasks Overview
Creating Custom Build Tasks
File Structure
Azure DevOps Marketplace
20.02.2021
9
Agenda

10. Azure DevOps Extension File Structure
20.02.2021
10
Solution Folder (example.sln)
 TaskFolder GetStorageAccountAccessKeyTask
 task.json
 ImagesFolder images
 Image.png
 tsconfig.json
 vss extension.json
Create DevOps Extensions

11. Azure DevOps Extension File tsconfig.json
20.02.2021
11
Typescript Description File:
Important Parts:
“compilerOptions ":
/* Basic Options */
"target": "es6", /* Specify ECMAScript target version : 'ES3' default ), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'.
"module": "commonjs",
/* Strict Type Checking Options */
"strict": true ,
"esModuleInterop": true
Create DevOps Extensions

12. Azure DevOps Extension File vss-extension.json
20.02.2021
12
Extension Description File:
Important Parts:
"id": azure devops simpletasks
"name": "Simple Tasks for Azure DevOps",
"version ": "1.0.<BUILDNUMBER>
“publisher ": cwlabsconsultingservices"
“targets ": [{ id ": Microsoft.VisualStudio.Services „ }]
“description": “lorem Ipsum",
"categories ": [“Azure Pipelines„],
"icons ": { default ": images /AzureDevOpsSimpleTools.png“ },
"files ": [{ “path ": GetSingleValueFromArmOutputTask “}]
contributions ": …..
Create DevOps Extensions

13. Azure DevOps Extension Task File task.json
20.02.2021
13
Task Description File:
"id": „GUID",
"name": "azure-devops-tools-getstorageaccountaccesskey",
"friendlyName": "Get first accesskeyof a defined storage account",
"description": "",
"helpMarkDown": "",
"author": "cwlabsconsultingservices",
"category": "Deploy",
Create DevOps Extensions

14. Multiple Versions of one Task needs another folder structure
20.02.2021
14
Create DevOps Extensions

15. Tasks Overview
Creating Custom Build Tasks
File Structure
Azure DevOps Marketplace
20.02.2021
15
Agenda

16. Azure DevOps Marketplace
20.02.2021
16
Create DevOps Extensions
 Publish your Extension
 Creating Publisher
https://marketplace.visualstudio.com/manage/createpublisher
 Publishing to Marketplace
 Usage in your own Pipeline
 Automation of creation and publishing
 Examples

17. Package your extension
20.02.2021
17
Create DevOps Extensions
Open your extension manifest file (vss-extension.json) and set the value of the publisher field to the ID of your publisher.
VSS Web Extensions SDK requires TFX. If you haven't already installed it, open a command prompt and run the following command.
npm install -g tfx-cli
From a command prompt, run the TFX tool's packaging command from your extension directory.
npx tfx-cli extension create
When it's completed, you see a message indicating your extension has been successfully packaged:
=== Completed operation: create extension ===
- VSIX: C:my-first-extensionAnnetteNielsen.my-first-extension-1.0.0.vsix
- Extension ID: my-first-extension
- Extension Version: 1.0.0
- Publisher: AnnetteNielsen

18. Upload your extension
20.02.2021
18
Create DevOps Extensions
From the management portal, select your publisher from the drop-down at the top of the page.
Select New extension, and then select Azure DevOps.
Drag and drop your file or select it to find your VSIX file, which you created in the previous packaging step, and then choose Upload.

19. Upload your extension
20.02.2021
19
Create DevOps Extensions
After a few seconds, your extension appears in the list of published extensions. Don't worry, the extension is only visible to you.

20. Install your extension
20.02.2021
20
Create DevOps Extensions
To test an extension, it must be installed to an organization in Azure DevOps. Installing requires being the owner of the organization (or having
the necessary permissions). Because your extension is private, it must first be shared with the organization you want to install it to.
From the management portal, select your extension from the list, right-click, and choose Share/Unshare or Publish/Unpublish, depending on the
extension; Share = Publish and Unshare = Unpublish.
Select Organization, and then enter the name of your organization. Select Enter.

21. Install your extension
20.02.2021
21
Create DevOps Extensions
Close the panel.
Your extension can now be installed into this organization.
In the Marketplace, select your extension to open its overview page.
Select Get it free to start the installation process. Select the organization you shared the extension with from the dropdown menu.
Select Install. Congratulations! Your extension is now installed into an organization and is ready to be tested.

22. Try your extension
20.02.2021
22
Create DevOps Extensions
Your extension contributed a view named "My Hub" to the project-level Code area. Let's navigate to it.
Select Proceed to organization at the end of the installation wizard to navigate to the home page of the organization the extension was installed to
(https://dev.azure.com/{organization}).
Select Organization settings, and then select Extensions to see your newly installed extension.

23. Debugging your extension
20.02.2021
23
Create DevOps Extensions
To debug the extension using Visual Studio or Browser Developer Tools and speed up the development without redeploying extension each time
you change source code, you need change manifest adding baseUri property:
{
...
"baseUri": "https://localhost:44300",
...
}
Changing the manifest loads the extension from your local web server instance. For example, IISExpress in Visual Studio. After you change the
manifest, deploy and install this debugging extension only once.
Note
Run your local web server in SSL mode, because Azure DevOps demands that the web page is served from a secure source otherwise you
obtain an error in browser console during the extension IFRAME loading.

24. Q&A

25. 20.02.2021
25
Du möchtest…
… Teil der nächsten IT-Revolution sein?
… Dich mit modernster Technologie beschäftigen?
… mit uns etwas Neues aufbauen?
… in einer Firma mit starken Werten und Kultur arbeiten?
Dann suchen wir genau Dich!
Bewirb Dich auf eine unserer offenen Cloud Stellen:
 Cloud Architekt (Azure, Google Cloud Platform, AWS)
 Cloud Ingenieur (Azure, Google Cloud Platform, AWS)
 Microsoft Azure Solution Engineer
Sende Deine Bewerbungsunterlagen direkt an
christian.waha@ti8m.ch.
Wir freuen uns auf Dich!
Mehr Infos auf www.ti8m.ch
Wir suchen Dich als
Cloud Experten!

26. Referenzen
20.02.2021
26
Create DevOps Extensions
Dokument Link
Microsoft Publisher Agreement RE4xqkx (microsoft.com)
Microsoft Payout schedules and
processes
Payout schedules and processes - Partner Center | Microsoft Docs
Microsoft Payout FAQ Payouts and tax profile FAQ - Partner Center | Microsoft Docs
Azure DevOps Tasks Referenz (Site 11) azure-pipelines-task-lib/tasks.schema.json at master · microsoft/azure-pipelines-task-lib · GitHub
Azure DevOps Tasks Examples https://github.com/microsoft/azure-pipelines-tasks/tree/master/Tasks
Azure Marketplace Create Publisher Create Publisher | Visual Studio Marketplace
Azure DevOps Extensions Developing extensions for Azure DevOps - Azure DevOps | Microsoft Docs
Extensions Samples Samples overview - Azure DevOps | Microsoft Docs