Remember to set the Content Type when using Static website hosting for Azure Storage

Currently I’m playing around with the new Static website hosting for Azure Storage feature which has recently been launched in public preview. This allows you to serve static web content (HTML, CSS, JS, images) directly from a dedicated blob directory inside Azure Storage without setting up any kind of web app or proxy function.

Why?

No web app means not needing to think about how many cores or memory your server needs. How many instances? The location of those? Just let Azure manage everything for you (which is usually way cheaper as well). Serverless all the way!

Having uploaded the static site to the $web container I tried the page inside Microsoft Edge, which was working fine. However, Chrome just started downloading my index.html as some generic file. After a bit of digging around I noticed that my documents were showing up as application/octet-stream in the Azure Storage Explorer. A quick google with bing search confirmed the wrong content type was likely to be the culprit.

So how do you change the content type to the correct value (in this case you want text/html)?

The easiest way is certainly to use the Azure Storage Explorer and just go right-click => properties. There you can edit the content type field.

However, if you’re deploying your site automatically you can’t just edit the content type manually every time. Since I’m using the Azure Node SDK to upload my site I had to figure out how to set the content type there. I’m using the createBlockBlobFromText (docs) method which additionally accepts an options object like this:

const options = { contentSettings: { contentType: 'text/html' } }

Be aware that the options structure has changed a while ago in the SDK and there are still a few outdated examples around that won’t result in an error (which they should IMO) but instead in your options being ignored.

Btw. I really think Azure Storage should figure out the correct content type on its own by looking at the file endings…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.