Search code examples
asp.net-coreblazorblazor-webassemblyazure-static-web-app

How do I configure client side routing in Blazor WASM for subfolder in URL?


The issue I'm having is in my Blazor WASM application, is that when developing (dotnet watch) if whether a link inside the app, or manually entering URL (Example: http://localhost:5267/Contact) it navigates to the desired page with no issues.

However, when I deploy on Azure, I am able to navigate to the app (www.mywebsite.com) and navigate within the app using links in the navbar to other parts of the application, but if I manually enter the URL like above (Example: www.mywebsite.com/Contact), I receive a 404 error from azure, with nothing more in the console than :

Failed to load resource: the server responded with a status of 404 ()      Contact:1 

I have tried several solutions I found online including adding a web.config file in the root of my project, all to no avail.

Any help would be appreciated!

Also this is my first question, if there is more info I can share please let me know!


Solution

  • If you are hosting your Blazor wasm app as a Azure Static Web App, you also need a staticwebapp.config.json to do the initial routing for you. Locally, this works by using Kestrel but on an Azure Static Web App, there is no server process running which does the initial routing.

    See also the documentation https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#file-location

    For my case it was enough to fill the staticwebapp.config.json file with this content:

    {
      "navigationFallback": {
        "rewrite": "/index.html"
      }
    }