BlazorDemo

Demo solution showcasing .NET 8 Blazor (Server + WebAssembly interactive components) and a .NET MAUI Hybrid host (Blazor inside native shells) used for the RGV Cyber September 2025 meeting.

Solution Overview

The repository contains multiple projects demonstrating reuse of Razor components across web and native targets:

Project	Type	Purpose
BlazorDemo.Web	ASP.NET Core host (Blazor Server + WebAssembly)	Hosts shared Razor components, enables interactive server and WASM render modes.
BlazorDemo.Web.Client	Blazor WebAssembly client	Referenced for interactive WebAssembly components (Multi-render mode).
BlazorDemo.NativeApp	.NET MAUI (Android, iOS, MacCatalyst, Windows)	Hybrid app embedding the shared Blazor components inside a native WebView.

Key Technologies

• .NET 8
• Blazor Server (interactive server render mode)
• Blazor WebAssembly (interactive WebAssembly render mode)
• .NET MAUI (multi-target: Android, iOS, MacCatalyst, Windows)
• Hybrid Blazor (shared Razor components consumed by both Web and MAUI)

Render Modes Demonstrated

• Static prerender + interactive server
• Interactive WebAssembly
• Multi-render mode composition (server + WASM in same page)

Project Structure Notes

• BlazorDemo.Web configures both AddInteractiveServerComponents() and AddInteractiveWebAssemblyComponents() in Program.cs and maps additional assemblies so the server host can serve components from BlazorDemo.Web.Client.
• BlazorDemo.NativeApp uses MAUI to package the same Razor components for desktop & mobile.
• Shared Razor component libraries are directly referenced rather than duplicated.

Prerequisites

Install the following before building:

• .NET 8 SDK: https://dotnet.microsoft.com/download
• (For MAUI) Required platform tooling / workloads:
  • dotnet workload install maui
  • Platform SDKs (Android SDK, Xcode for iOS/Mac, Windows SDK) as needed
• (Optional) VS 2022 17.8+ with .NET Multi-platform App UI workload

Confirm workloads:

dotnet --version
dotnet workload list

Getting Started (Web)

1. Restore & build:

   dotnet build
   

2. Run the web host:

   dotnet run --project BlazorDemo.Web/BlazorDemo.Web.csproj
   

3. Navigate to the displayed HTTPS URL (typically https://localhost:5xxx).
4. Use browser dev tools + network tab to observe when WebAssembly resources load for interactive WASM components.

Getting Started (MAUI / Native)

1. Ensure MAUI workload installed (dotnet workload install maui).
2. Build:

   dotnet build BlazorDemo.NativeApp/BlazorDemo.NativeApp.csproj
   

3. Run for a specific target:

   dotnet build -t:Run -f net8.0-android BlazorDemo.NativeApp/BlazorDemo.NativeApp.csproj
   dotnet build -t:Run -f net8.0-windows10.0.19041.0 BlazorDemo.NativeApp/BlazorDemo.NativeApp.csproj
   

   (Choose the target that matches your environment.)

Common Tasks

• Clean solution: dotnet clean
• Format code (if dotnet format installed): dotnet format
• Publish web (example):

  dotnet publish BlazorDemo.Web/BlazorDemo.Web.csproj -c Release -o publish
  

Dependencies / NuGet (Conceptual)

Exact package references come from the SDK (implicit framework references). Core dependencies include:

• Microsoft.AspNetCore.App (framework shared)
• Microsoft.NET.Sdk.Razor (via project Sdk)
• Microsoft.NET.Sdk (base)
• MAUI toolchain packages (for the NativeApp)

Demo Context (RGV Cyber September 2025)

This solution was prepared as a live demo for the RGV Cyber September 2025 meeting to illustrate:

• Blazor multi-render modes in .NET 8
• Component reuse between web & native (MAUI Hybrid)
• Progressive enhancement moving from server interactivity to WebAssembly

Author

Josh Morales
Website: https://selarom.net

Join Our Local .NET User Group

RGV Devs .NET (Rio Grande Valley)
Website: https://rgvdevs.net
We welcome developers of all experience levels. Join us to learn, share, and collaborate on .NET, cloud, mobile, web, and related technologies.

Contributing

Small demo; contributions (issues / PRs) are welcome if they improve clarity or educational value.

Troubleshooting

• If hot reload not functioning: ensure using latest VS or run with dotnet watch run.
• If MAUI Android build fails: accept Android SDK licenses and ensure Java 17+ installed.
• If WebAssembly debugger not attaching: run in Development and enable browser debugging tools.

Acknowledgements

Thanks to the RGV Cyber and RGV Devs .NET communities for support and feedback.