When opening my static website on Azure Storage I get a download screen

Question

I'm hosting a ReactJS app on a Azure Storage using the static website feature. Using this script:

$container = "`$web"
$context = New-AzureStorageContext -StorageAccountName $env:prSourceBranchName -StorageAccountKey "e4Nt0********dbFlEG2LN9g2i5/yQ=="
Get-ChildItem -Path $env:System_DefaultWorkingDirectory/_ClientWeb-Build-CI/ShellArtifact/out/build -File -Recurse | Set-AzureStorageBlobContent -Confirm:$false -Force -Container $container -Context $context

I'm uploading the files from my build to the Azure storage $web blob.

When I navigate to the URL of the static page I get a download screen:

When I remove all the files and upload a simpel index.html file I does load the index.html file:

https://gist.github.com/chrisvfritz/bc010e6ed25b802da7eb

EDIT

In Edge I can open the page but Chrome and Firefox load the download screen. But Firefox does show some more information:

So it looks like the content-type is a bit weird.

Metrist

What is the extension of the URL? Anything other than .htm and .html will probably be treated as a file because there is no web server to run server-side scripts and no htaccess to map other extensions to .htm and .html. If an .htm page includes a .js or .css that will work because then the browser fetches those as files for building the page. – Seka

Hm this is weird. So I download the index.html file from the Blob and uploaded it manually and now the page loads. So I think there's a difference between uploading the file manually and using Set-AzureStorageBlobContent – Metrist

I think so, I had issue using Azure Powershell cmdlet and file encoding. I finally used az cli upload batch command to upload my static website files. learn.microsoft.com/en-us/cli/azure/storage/… – Manganate

Answer 1

The root cause should be the content-type is incorrect.

As you have already mentioned, when manually upload a .html file, it's content type is "text/html". While use Set-AzureStorageBlobContent, it changes to "application/octet-stream".

The solution is that when use powershell cmdlet Set-AzureStorageBlobContent, you should specify the parameter -Properties, like below: -Properties @{"ContentType" = "text/html"}.

Sample code like below(It works at my side):

$context = New-AzureStorageContext -StorageAccountName "xxx" -StorageAccountKey "xxxxx"

#note that the last "\" is necessary
$path = "D:\temp\1\"

Get-ChildItem -Path $path  -File -Recurse | `
 %{ if($_.extension -eq ".html") {Set-AzureStorageBlobContent -File $_.FullName -Blob $_.FullName.Replace($path,'')  -Container "test-1" -Context $context -Properties @{"ContentType" = "text/html"}} `
 else {Set-AzureStorageBlobContent -File $_.FullName -Blob $_.FullName.Replace($path,'') -Container "test-1" -Context $context}}

The above code just change the content_type of the files whose extension is .html to "text/html". You can feel free to change the code to meet your need.

Porky