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?

Answer 1

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.