web.config rewrite rule not working in Azure static website in blob storage

Question

I have a single page React app hosted in Azure blob storage but am getting an The requested content does not exist. error when deep linking into a page:

I've enabled static website option in the storage account:

The files are all in place in the $web container:

This includes the following web.config with a rewrite rule that is supposed to let index.html handle all the routing:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Can anyone see where I've gone wrong?

score 16 · Answer 1 · answered Jun 13 '19 at 15:44

16

You can do the deep linking if you point the 404 page back at your index.html. This is not a perfect solution - has side effects - but it will work for the majority of cases.

answered Jun 13 '19 at 15:44

Burke Holland

2,325
1
22
33

This helped me out as well, care to explain the side effects (except not having a proper 404?) – Peter Boomsma Jul 07 '19 at 20:42
Nope... I already had "Error document path" pointing to my "index.html" file, but still get the 404 error, when try to navigate directly to webpages (routes) inside my Angular app. – Mike Gledhill Nov 05 '19 at 18:31
@PeterBoomsma The side effect is that when accessing a deep url directly (e.g. from an external link, bookmark etc) the site will most likely work because index.html is returned but it is returned with http status 404. That is probably not a big problem, but it's not something I personally would be pleased with. – Mathias Rönnlund Jan 16 '20 at 09:45
1

The most important side effect is that SEO doesn't like 404s. This means that your site will certainly not rank very well on google search. – Luis Gouveia Jul 31 '20 at 17:05
If you're hosting a PWA app this way, it doesn't appear to work offline once "installed" on your phone. – Petebr Mar 17 '21 at 16:58

score 3 · Accepted Answer · answered Apr 10 '19 at 06:47

The static website in Azure Storage GPv2 is different from Azure App Service. It only hosts these static web files which include HTML/CSS/JavaScript files, other files can be handled in browser like images, robots.txt, etc. It has inability to process server-side scripts, due to there is not IIS. So your web.config file is no sense for it to change the access routing and be belong to server-side script for IIS.

Actually, you can see the words in Azure portal.

Configuring the blob service for static website hosting enables you to host static content in your storage account. Webpages may include static content and client-side scripts. Server-side scripting is not supported in Azure Storage. Learn more

And refer to the Learn more link of Static website hosting in Azure Storage

In contrast to static website hosting, dynamic sites that depend on server-side code are best hosted using Azure App Service.

I recommended using Azure App Service for your app if requires the URL-rewrite feature.

score 3 · Answer 3 · answered Jul 31 '20 at 18:50

3

Although the accepted answer is right when it says that static websites don't process nicely the web.config, it is false that you cannot do what you want using a static website. Here's what you can do:

Click on the 'Azure CDN' tag (below Static Website)
Create a new CDN Profile (be careful to select the WEB (static website) link and not BLOB.
Enter the newly CDN profile on 'All Resources'.
Click on the single endpoint you see in 'Overview'.
Click on 'Rules Engine'
Add the following rule:

Credits: My answer is based on Andreas Wendl answer which you can find here (https://stackoverflow.com/a/59974770/3231884). I added some detail because after checking his answer it took me a couple of hours to understand exactly what I had to do.

There you go, you can now see perfectly the screen Andreas is speaking of

answered Jul 31 '20 at 18:50

Luis Gouveia

8,334
9
46
68

1

Note there is a limit of 25 rules and a charge of $1 per month per rule. – John Sep 29 '20 at 09:47
I didn't know that @John, thanks! It doesn't affect me as I have $150 to spend per month. – Luis Gouveia Sep 29 '20 at 09:57
1

@john - Azure CDN lets you have 5 rules for free and then it's $1 per rule + .60 per million requests https://learn.microsoft.com/en-us/azure/cdn/cdn-standard-rules-engine-reference – BeanFlicker Oct 22 '20 at 10:02
1

Excellent solution! This should be the flagged solution. – martonx Jul 03 '21 at 19:41

score 2 · Answer 4 · answered Apr 04 '20 at 20:03

I have multi-lingual Angular application with deep linking (which should be accessed directly) and I did the following:

Folder structure in the $web contrainer:

. ru-UA
. uk
. en-US
. index.html

Enable 404 to the index.html in the static website setup in the Azure Portal
On your root index.html add the next code:

<html>
<head>
<script>
 if (window.location.pathname != null) {
     const segments = window.location.pathname.split('/').filter(x => x.length > 0);
     const languages = ['ru-UA', 'uk', 'en-US'];

     if (languages.indexOf(segments[0]) >= 0)
     {
         sessionStorage.setItem('path', window.location.pathname);
         window.location = '/' + segments[0] + '/';
     } else {
         window.location = '/uk/'; // It might be your default language
     }
 }
</script>
</head>
</html>

Then, in your Angular add the next:

     const spaRedirect = sessionStorage.getItem('path');
     if (spaRedirect) {
         const path = spaRedirect.split('/').filter(x => x.length > 0).slice(1).join('/'); // slice(1) to remove language segment
         await this.router.navigate(['/' + path]);
         sessionStorage.removeItem('path');
     }

Now you can have deep linking.

How it works:

User enters in the browser: www.domain.com/uk/very/deep/link Azure
Static Website engine can't find such blob and redirects to 400, which is root index.html -> www.domain.com/index.html
Root index.html got full link via pathname property and split it to the segments.

Actually, you can avoid splitting by segment, but for me it's just extra validation step.
Then it redirect to Angular localized-specific index.html in appropriate folder and Angular Engine start to serve website -> www.domain.com/uk/index.html

Please note, that you can have a delay here, cause you have to launch Angular with all dependencies and only after that redirect
Your very basic component finds something in the sessionStorage.getItem('path') and make Angular-based redirect to the deep link. -> www.domain.com/uk/very/deep/link

score -3 · Answer 5 · answered Nov 05 '19 at 20:23

None of these solutions worked for me, and I miserably started to accept that I wouldn't be able to host my Angular application (with Routing) just in Azure Storage.

But, actually, I found a solution.

You need to manually add a web.config file to your src folder (yes, even though we're not hosting this on an IIS server)

 <configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="Main Rule" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
  </configuration>

...then add this file to the assets section in your angular.json file:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        . . . 
        "assets": [
          "src/web.config"
        ],

Shockingly, this works now.

In my Angular app, I could click around to various sub-pages, eg

http://www.mikesapp.web.core.windows.net/Orders/List

and, crucially, I can also open a browser and go directly to this webpage.

Can you elaborate please? Where does this `web.config` file end up after you build? Is it copied to the root of your `$web` container? — dmitrybelyakov, Nov 11 '19 at 15:22
Does this mean that, while undocumented, Azure Static Site hosting uses IIS and your web.config works because of folder config inheritance? — karl.r, Dec 20 '19 at 21:44
I've tested this and not found it to work. If the *Error document path* option in the Storage Account resource config is set to `index.html` or similar, though, 404 responses will use that file for their body. For an Angular, Next.js, etc. website, this would mean the page would load and the client-side JavaScript would handle the routing. It would work, but it wouldn't be ideal. For what it's worth, Azure static sites have an HTTP `Server` header value of "Windows-Azure-Web/1.0 Microsoft-HTTPAPI/2.0", which probably isn't IIS. I wouldn't be surprised if blob storage wasn't even Windows. — Blieque, Jun 22 '20 at 19:50

web.config rewrite rule not working in Azure static website in blob storage

5 Answers5

Linked