Creating a Azure Devops web extension from a React application

Question

I am looking to create a web extension in Azure Devops from a React application.

As in seen in this tutorial, there is a file called my-hub.html, which is the start page of the extension.

By following the steps in the above link, I was able to create a web extension that prints the logged in user, as per my-hub.html, which does document.getElementById("name").innerText = VSS.getWebContext().user.name;.

However, I have written my application in React using Typescript and the start file is App.tsx. Could someone advise how I can instruct the vss-extension.json file to load the extension from App.tsx file?

{
    "manifestVersion": 1,
    "id": "my-first-extension",
    "publisher": "",
    "version": "1.0.0",
    "name": "My First Extension",
    "description": "A sample Visual Studio Services extension",
    "public": false,
    "categories": ["Azure Repos"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "contributions": [
        {
            "id": "my-hub",
            "type": "ms.vss-web.hub",
            "targets": [
                "ms.vss-code-web.code-hub-group"
            ],
            "properties": {
                "name": "My Hub",
                "uri": "my-hub.html"
            }
        }
    ],
    "files": [
        {
            "path": "my-hub.html",
            "addressable": true
        },
        {
            "path": "node_modules/vss-web-extension-sdk/lib",
            "addressable": true,
            "packagePath": "lib"
        }
    ]
}

Would I need to convert the React application to an html page?

What happens if you replace the start page to App.tsx directly? According to the doc, extensions are developed using standard technologies like HTML, JavaScript, and CSS. It seems cannot do this. — Jessica
Hi tubby, I notice that my colleague has share the workaround in that ticket, please check it, if you have any concern, feel free to share it here. — Vito Liu

Vito Liu Vito Liu · Accepted Answer · 2020-08-28T07:19:00

you can deploy the React App first, then add the app/website link in html file. Something like this :

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">;
<head>
    <script src="lib/VSS.SDK.min.js"></script>
    <style>
        body {
            background-color: rgb(100, 100, 100);
            color: white;
            margin: 10px;    
            font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
        }
    </style>
    <script type="text/javascript">
        VSS.init();
        VSS.ready(function() {
            document.getElementById("name").innerText = VSS.getWebContext().user.name;
        });
    </script>
</head>
<body>        
    <h1>Hello, <span id="name"></span></h1>
<p>Hello. This is a link to <a href="https://www.google.com">React App</a>?<br />
Just click to navigate to it</p>
</body>
</html>

Please reference this example if you want to integrate the React app directly with the extension.

Creating a Azure Devops web extension from a React application

1 Answers