AOW4/docs/Prompts/AI Gen Documents/blazor.md

Blazor Project Configuration

This document explains the hosting model used in this project, how to identify it, and how to switch between different Blazor setups.

Current Project Type: Blazor Web App (.NET 8+)

This project uses the Blazor Web App template introduced in .NET 8. This is a unified model that supports multiple rendering modes:

• Static Server-Side Rendering (Static SSR): The default mode for most components in this project.
• Interactive WebAssembly: Currently configured as the interactive hosting model.

1. How to tell it's using WebAssembly

You can identify the hosting model by looking at the following locations:

• AOW4/Program.cs:
  • builder.Services.AddRazorComponents().AddInteractiveWebAssemblyComponents(); registers the WebAssembly services.
  • app.MapRazorComponents<App>().AddInteractiveWebAssemblyRenderMode() enables the WebAssembly rendering mode.
• Project Structure:
  • AOW4 (Server Project): Handles the initial request and serves the static assets.
  • AOW4.Client (Client Project): Contains components and logic intended to run in the user's browser via WebAssembly.
• Project References (AOW4.csproj):
  • The server project references the client project: <ProjectReference Include="..\AOW4.Client\AOW4.Client.csproj" />.
  • It also includes the package Microsoft.AspNetCore.Components.WebAssembly.Server.

2. Switching Between Setups

Switching to Blazor Server (Interactive Server)

If you want components to run on the server via SignalR instead of WebAssembly:

1. Update Program.cs in the Server project:

   // Add service registration
   builder.Services.AddRazorComponents()
       .AddInteractiveServerComponents(); // Add this line
   
   // Enable render mode
   app.MapRazorComponents<App>()
       .AddInteractiveServerRenderMode(); // Add this line
   

2. On your Components: Change the render mode attribute at the top of your .razor files:

   @rendermode InteractiveServer
   

Using Interactive Auto

Auto mode uses Blazor Server while the WebAssembly bundle is downloading, then switches to WebAssembly on subsequent visits.

1. Update Program.cs: Ensure both AddInteractiveServerComponents() and AddInteractiveWebAssemblyComponents() are registered, and both render modes are added to MapRazorComponents<App>().
2. On your Components:

   @rendermode InteractiveAuto
   

Switching to ONLY Blazor Server

To remove WebAssembly entirely:

1. Remove the AOW4.Client project reference from AOW4.csproj.
2. Remove all "WebAssembly" related calls in Program.cs.
3. Delete the AOW4.Client project.
4. Ensure all components are moved to the AOW4 (Server) project.

3. Production Release for Blazor WebAssembly

Since this is a hosted Blazor Web App, you publish the Server project. The build process automatically handles the WebAssembly client assets.

Command

Run this command from the solution root:

dotnet publish AOW4\AOW4.csproj -c Release

What happens during publish:

1. Server Compilation: The ASP.NET Core host project is compiled.
2. Client Compilation: The AOW4.Client project is compiled into WebAssembly (.wasm) and static assets.
3. Asset Integration: All client-side files (WASM, JS, CSS, images) are placed in the wwwroot folder of the published server output.
4. Output Directory: The final ready-to-deploy application will be in AOW4\bin\Release\net10.0\publish\.

To deploy, simply copy the contents of the publish folder to your web server (IIS, Azure App Service, Nginx, etc.).