How do I define static files as routes on an Azure Static Website?

Question

My use case is a static azure website with deep linking. I would like for my azure site to return my index.html page when certain URLs are called e.g. /t/2

I can do this when using ASP.NET to serve the application by adding the following into my Route

routes.MapRoute(
            name: "DeepLink",
            url: "t/{*id}",
            defaults: new { controller = "Home", action = "Index" }
        );

I would like to achieve the same but with a static site. I can add in a Web.config which I can use to redirect/rewrite my url but I want the URL to stay as /t/2 so the front end can react to it.

Answer 1

Just had the same issue and stumbled across this thread --

Since the Static website has no idea about any routes but the main one -- it will always default to the not-found for any underlying route.

But in a SPA, you don't have a static 404 document, your index.html will handle that for you.

So the only thing you have to do is specify index.html as the 404 document as well and everything seems to work.

Answer 2

Using the 404 page as a fallback isn't the most recommended way of routing your links.

You can use a routes.json file, as described here.

You can use wildcards if needed. Your routes.json file would look something like this:

{
   "route": "/t/2",
   "serve": "/index.html",
}

Answer 3

If you're using a static web app then you don't have access to any server-side code to do your routing, you will need to do it all client side. You would need to use a Javascript library or similar that will support this.

Answer 4

If by static web site you are referring to Azure Storage web sites you can specify a custom 404 html which can serve a small javascript snippet that redirects back to index.html (as Sam pointed out).

If the static web site is in Azure App Service you can add this snippet in your web.config:

<system.webServer>
    <rewrite>
      <rules>        
        <rule name="Main Rule" stopProcessing="true">
          <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>