microsoft/azure-devops-extension-hot-reload-and-debug

microsoft/azure-devops-extension-hot-reload-and-debug

Description: Azure DevOps extension sample that uses hot reloading and is debuggable directly in VS Code

Language: TypeScript

License: MIT

Stars: 106

Forks: 26

Open issues: 28

Created: 2019-05-13T22:24:40Z

Pushed: 2026-06-20T03:48:54Z

Default branch: main

Fork: no

Archived: no

README:

Azure DevOps Extension Hot Reload and Debug

This repository demonstrates how to load an Azure DevOps extension's code directly from the dev machine rather than bundle all the code and deploy it through the marketplace. We will leverage the (somewhat hidden) capability in Azure DevOps to load content from localhost, which will enable us to use hot reload and debug in VS Code.

For more information about our motivation in developing this project, see our blog post.

Prerequisites

Download and install the following tools

1. Visual Studio Code 1. Firefox (because the VS Code Debugger for Chrome extension doesn't support iframes yet) 1. The Debugger for Firefox VS Code extension 1. The tfx-cli npm package 1. The webpack npm package 1. The webpack-dev-server npm package

> If you would prefer not to install the npm packages globally, you can add them to devDependencies in your package.json file and invoke them with scripts. You can use the [package.json](./package.json) in this repo as a template for scripts and to ensure you have the correct versions of packages in your extension.

Starting a new extension

If you're starting a new extension, you can either clone this repo or use our Yeoman generator to scaffold a new extension with support for hot reload and debugging. (The following sections provide information about how we configured the template.)

Clone

git clone https://github.com/microsoft/azure-devops-extension-hot-reload-and-debug.git

Yeoman

npm install -g yo
npm install -g @microsoft/generator-azure-devops-extension
yo @microsoft/azure-devops-extension

Enabling an existing extension

To reconfigure your existing extension, follow these steps to get everything working. This configuration assumes you know the basics of how to set up an Azure DevOps extension using Typescript and webpack. For more information, see the Azure DevOps extension docs or the azure-devops-extension-sample repo.

Extension manifest

The "trick" to get everything working is to set baseUri in the extension manifest file to https://localhost:3000. This setting tells the extension to load resources from your local dev server rather than the packaged extension.

> Your port can be different than 3000. For the purposes of this document we will use 3000 consistently, but if you have a port conflict, you can change this to any port that works for your environment.

We recommend using an overrides JSON file to set this value only for your dev builds. The tfx command line utility supports overriding any values in your extension manifest with the values in this file while packaging by passing the --overrides-file parameter. We will use this feature to set the value of baseUri differently for dev vs. release builds.

Create an overrides JSON file with the following content for your dev build called dev.json:

{
"id": "[extension-id]-dev",
"public": false,
"baseUri": "https://localhost:3000"
}

You can leave default values for these properties in your extension manifest or, for consistency, you can delete them from your manifest and create a release.json overrides file for release builds as well (in which case we suggest you create a configs folder to keep things organized):

{
"id": "[extension-id]",
"public": true
}

> You can move additional settings you would like to override for specific build configurations from the extension manifest to the dev.json or release.json files if you choose. These values are just the recommended minimum settings.

Webpack config

You will need to enable source maps in webpack.config.js. Set the devtool property to inline-source-map. You will also want to set devServer.https to true and devServer.port to 3000.

module.exports = {
devtool: "inline-source-map",
devServer: {
https: true,
port: 3000,
},
// ...
};

> For this example, we've validated that inline-source-map works well. However, you may find that another source map option works better for your project.

By default, webpack serves its compiled, in-memory files directly under localhost:3000 but the extension is looking for files in the dist path. To fix this discrepancy, set output.publicPath to /dist/ in the webpack config. Now webpack will serve files from localhost:3000/dist and your extension should load correctly.

module.exports = {
output: {
publicPath: "/dist/",
// ...
},
// ...
};

> Your extension may load fine without this change because webpack will serve files from the filesystem if it does not have an in-memory version to serve instead. Therefore, webpack may serve files from the dist folder if it exists, but hot reload will not work.

In order to make webpack copy HTML files from the src folder to the dist folder, you need to add the copy-webpack-plugin npm package to your project, and then add the following lines to your webpack.config.json file. These changes will configure webpack to copy all HTML files from src:

const CopyWebpackPlugin = require("copy-webpack-plugin");
// ...

module.exports = {
plugins: [new CopyWebpackPlugin({ patterns: [{ from: "**/*.html", context: "src"}] })],
// ...
};

VS Code's launch.json

The last configuration change we need to make is to set up a debug configuration for VS Code that launches Firefox with the correct path mappings. Add a path mapping with url set to webpack:/// and path set to ${workspaceFolder}/. To avoid restarting Firefox every time you debug, you can also set the reAttach property on the...