Correctly packaging CSS files for deployment to Azure CDN as part of Azure DevOps extension

Question

I'm developing an Azure DevOps extension, which displays the a summary of work items for the current Sprint for printing.

I am failing to get static CSS files to publish correctly.

I have the following configured in the manifest.json in the files section:

    {
        "path": "css/print.css",
        "contentType": "text/css",
        "addressable": true
    },
    {
        "path": "css/screen.css",
        "contentType": "text/css",
        "addressable": true
    },

The structure of the project is:

css/screen.css
css/print.css
board-cards.html
vss-extension.json

Reading this documentation: https://docs.microsoft.com/en-us/azure/devops/extend/develop/static-content indicates that the static content should be published to: https://publisher.gallery.vsassets.io.

When debugging - the following two 404's appear in the network log:

https://publisher.gallerycdn.vsassets.io/css/print.css https://publisher.gallerycdn.vsassets.io/css/screen.css

(I've changed my publisher account name to the generic "publisher" string for ease)

I've opened the .vsix in 7zip, and the folder and css files are in the package. After many hours of Googling and hunting through stackoverflow, I'm unable to find a solution.

I tried changing the entry in "files" to be simply:

{
   "path": "css",
   "addressable": true
}

However this had no effect.

Is anyone able to advise me on what I'm missing or doing wrong?

Through further debugging I've found that the files do exist under a URL specific the the version published - e.g. publisher.gallerycdn.vsassets.io/extensions/publisher/… I don't know how I'm supposed to package these files up so that the CSS is referenced relatively. — Nick

Nick Nick · Accepted Answer · 2018-12-28T11:56:53

Through further debugging I've found that the files do exist under a URL specific the the version published.

e.g. https://publisher.gallerycdn.vsassets.io/extensions/publisher/board-cards/1.0.64/1545996658773/css/screen.css

And then I checked the mark-up, and I realised I'd made an absolute reference to the CSS files. E.g.

/css/screen.css

By removing the first slash - this made the reference to the CSS file relative, which solved the problem.

HTML 101.

Correctly packaging CSS files for deployment to Azure CDN as part of Azure DevOps extension

1 Answers