CODEWITHSUNDEEP
htmlazurestaticazure-storage
Konrad
Konrad

Reputation: 4812

Subfolders in static Azure hostings

I want to use an Azure blob file storage to host a static website.

This works fine, if the html-page is located in the root folder of the $web-storage.

But if I put the webpage into a subfolder, the relative links (e.g. to css files) don't work anymore - since they are interpreted as root-based links

<link href="css/bootstrap.css" rel="stylesheet">

index.html is located in "subfolder1"

But instead of 

https://blablabla.web.core.windows.net/subfolder1/css

it is resolved to

https://blablabla.web.core.windows.net/css

Is this an error of Azure or a misunderstanding/error in my html?

Upvotes: 4

Views: 7186

Answers (2)

PramodValavala
PramodValavala

Reputation: 6647

You can setup a base tag to get absolute URLs to work. So, adding this to under html > head should do the trick

<html>
  <head>
    <base href="/subfolder1/" />
    ...
  </head>
  ...
</html>

Upvotes: 3

Peter Pan
Peter Pan

Reputation: 24148

Actually, $web is a special container on Azure General Purpose Storage V2, which be the root path like www for Apache HTTP server or wwwroot for IIS to hosts all static folders and files. All folders and their subfolders must have to be created in $web container. You can see its information on Azure portal as the figure below.

enter image description here

Here is my sample to create two folders a & b and their index.html under $web container in Azure Storage Explorer.

enter image description here

If access my primary endpoint https://<account name>.z7.web.core.windows.net, the index web page of my static website is an Angular sample web page as below,

enter image description here

Then, to access the subfolder a and b like you want, the index page of these subfolders as below.

index.html of folder a

<html>
<body>
<h2>A</h2>
</body>
</html>

enter image description here

enter image description here

Hope it helps for understanding the structure of static website on Azure General Purpose Storage V2.

Update for your comment:

I update my a/index.html file and add a new file a/a.css, the codes as below.

a/index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<h2>A</h2>
<span id='test'>Hello</span>
</body>
</html>

a/a.css

#test {
    color: red;
}

There are some behavior up to the browser implement.

Q: What's the difference between http://host/a and http://host/a/? A: To access them in Chrome, the two urls will response the same content from a/index.html. However, their base paths are different: / for http://host/a , but /a/ for http://host/a/, that will cause different behavor for loading a relative path resource of a.css, as the figures below.

Fig 1.

enter image description here

Fig 2.

enter image description here

Upvotes: 5

Related Questions