How do I prerender a Blazor WebAssembly application to static files?

To set up prerendering for a hosted Blazor WebAssembly app:

1. Create the Blazor web Assembly App with ASP.net core Hosted. Here solution name is BlazorHosted.
   

2. Delete wwwroot/index.html file from the Blazor WebAssembly Client project.
   

3. In the Client project, delete the following lines in Program.cs:
   

   - builder.RootComponents.Add<App>("#app");
   - builder.RootComponents.Add<HeadOutlet>("head::after");
   

4. Add the _Host.cshtml and _Layout.cshtml files to the Pages folder in the Server project. These files are already included in the Blazor Server template and can be obtained from there.
   Make the following changes to the _Host.cshtml file:
   

   • Modify the namespace based on APP namespace as BlazorHosted.Client.
   • Update the render-mode as ‘WebAssemblyPrerendered’ in host.cshtml

   <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
   

5. Make the following changes to the _Layout.cshtml file:
   Update the Pages namespace at the top of the file to match namespace of the Server app’s pages like this,

   @namespace BlazorHosted.Server.Pages

   
   Add @using directive for the Client project at the top of the file:

   @using BlazorHosted.Client

   
   Update the stylesheet links to point to the WebAssembly project’s stylesheets. So, make the following changes.
   Remove the following lines
   

   <link href="css/site.css" rel="stylesheet" />
   <link href="{App Name space}.styles.css" rel="stylesheet" />
   <component type="typeof(App)" render-mode="ServerPrerendered" />

   Add the following lines
   

   <link href="css/app.css" rel="stylesheet" />
   <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
   <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

   Modify the Blazor script source of Server side Blazor:
   

   <script src="_framework/blazor.webassembly.js"></script>

6. In the endpoint mapping of the Server project in Program.cs, update the fallback from the index.html file to the _Host.cshtml page.
   Remove the following line
   

   app.MapFallbackToFile("index.html");

   Add the following line
   

   app.MapFallbackToPage("/_Host");

7. If the Client and Server projects use one or more common services during prerendering, factor the service registrations into a method that can be called from both projects. For more information, see ASP.NET Core Blazor dependency injection.
8. Run the Server project. The hosted Blazor WebAssembly app is prerendered by the Server project for clients.