Blazor WASM hosted in Azure Static App cannot be visited directly by using sub-directories

Question

I have a Blazor WASM hosted on Azure Static App, website works fine. But I realized if you give someone a link to one of the pages on the site like https://www.myblazor.com/path/do, and this person never visited this site before, the site will display:

The requested content does not exist.

HttpStatusCode: 404
ErrorCode: WebContentNotFound
RequestId : 18382fd7-f01e-0015-31cc-67b610000000
TimeStamp : 2021-06-23T01:10:44.3896906Z

The person must visit the root first https://www.myblazor.com, after the site loads, he can then manually go to the special page.

Why is this? Is it because I am using the static file service, instead of regular App Service? Is it possible to make it work? It's very common to link to a specific page on the website, not necessarily the root.

Thanks for any advice.

Answer 1

You need to configure a fallback route. Add a file named staticwebapp.config.json in the same folder as your Blazor app's csproj file with this content:

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

See this example app here: https://github.com/staticwebdev/blazor-starter/blob/main/Client/staticwebapp.config.json