blazorblazor-webassemblyazure-static-web-app

Page not found error on Blazor WASM hosted on Azure Static Web App


I have a very basic Blazor WASM app targeting .NET 8 hosted on Azure Static Web Apps.

I just added a very simple page -- see below. I can just go direct to the URL locally and it works fine but on Azure Static Web App service, I get the following page not found error -- see below. What's interesting is that this is not the page not found error that my app should generate.

Here's the Azure page not found error:

enter image description here

My simple page looks like this:

@page "/privacy"

<h3>Privacy Policy</h3>

<div>
   <p>Some text about privacy policy</p>
   <p>More text about privacy policy</p>
</div>

My app uses Azure AD B2C for user management and the privacy page I just added should be available to public i.e. anonymous users as well as authenticated users.

This is what my App.razor looks like:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (context.User.Identity?.IsAuthenticated != true)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p role="alert">You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Any idea what could be the issue here?


Solution

  • page not found error

    To avoid the Page not found error in the Static web app I added the staticwebapp.config.json file to the root directory of my project.

    It allows you to configure routing, authentication, authorization, and other key settings related to app's functionality in the Azure environment.

    staticwebapp.config.json:

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

    If your using Authentication use below staticwebapp.config.json file.

    {
      "auth": {
        "roles": {
          "anonymous": [
            "/public/*"
          ],
          "authenticated": [
            "/private/*"
          ]
        }
      },
      "navigationFallback": {
        "rewrite": "/index.html"
      }
    }
    

    Azure Static Web App Output:

    enter image description here