Azure DevOps Embed Design

Azure DevOps Embed Design is a extension that allows users to seamlessly integrate their Figma designs into Azure DevOps. With this extension, designers can easily share their designs with the development team, who can then use the designs to build and implement the user interface for a project. This extension makes it possible for designers to embed their designs into Azure DevOps work items, allowing developers and designs to keep on the same page.

Running Locally for Development

Prerequisites

Download and install the following tools

1. Visual Studio Code
2. Firefox (because the VS Code Debugger for Chrome extension doesn't support iframes yet)
3. The Debugger for Firefox VS Code extension
4. The tfx-cli npm package
5. The webpack npm package
6. 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 in this repo as a template for scripts and to ensure you have the correct versions of packages in your extension.

Before we deploy the extension, we need to install its dependencies and compile the code using the following commands:

npm install
webpack --mode development

You will need to deploy your extension to the marketplace at least once using the following command:

tfx extension publish --manifest-globs vss-extension.json --overrides-file configs/dev.json --token [token]

The [token] here is an Azure DevOps PAT (personal access token) with the Marketplace (Publish) scope and access set to All accessible organizations. For more information, see Authenticate access with personal access tokens.

After the extension is published, share it with your Azure DevOps organization and install it. Navigate to a project and you will find a new hub called "Hello World!" When you click it, you will notice that the hub won't load correctly. It isn't loading because the extension is configured to load all its resources (html, images, etc.) from localhost:3000, but the dev server isn't running yet.

Start the webpack-dev-server with:

webpack-dev-server --mode development

Now if you go to localhost:3000 in your browser, you should get an untrusted certificate error page. Select Advanced and then select Accept the Risk and Continue.

Go back to Azure DevOps and reload. Your extension should now load correctly and any changes to the source code will cause webpack to recompile and reload the extension automatically.

Although most code changes will be reflected immediately, you may still need to occasionally update your extension in the marketplace. The dev extension loads all its resources from the webpack-dev-server, but the manifest itself is being loaded from the published code. Therefore, any changes to the manifest file will not be properly reflected in Azure DevOps until the extension has been republished.