🚀 Setup .NET MAUI Blazor Hybrid(mobile) & Web App Using Radzen Blazor Components from Scratch | Complete Configuration Guide

Radzen.Blazor Components
1

In this comprehensive tutorial, I'll show you exactly how to create and configure a .NET MAUI Blazor Hybrid(mobile) and Web App solution that runs on multiple platforms from a single codebase!

:bullseye: What This Tutorial Covers:

:white_check_mark: Creating the .NET MAUI Blazor Hybrid and Web App Template - Step-by-step project creation :white_check_mark: Understanding the Solution Structure - 4 projects working together seamlessly

:white_check_mark: Configuring All Project Files - .csproj, Program.cs, and configuration files

:white_check_mark: Adding Radzen Blazor Components - Professional UI library integration

:white_check_mark: Setting Up Authentication Services - Complete AuthenticationService implementation

:white_check_mark: Custom Theme Configuration - Beautiful green (#008751) soccer-themed styling

:white_check_mark: Shared Code Architecture - Write once, run on Web, Android, iOS, Windows, macOS

:white_check_mark: HttpClient Setup - API integration ready for all platforms

:open_file_folder: Solution Structure Explained:

1. SoccerLeague.Client.Shared - Shared components, services, and styles

2. SoccerLeague.Client - MAUI Hybrid app for mobile and desktop

3. SoccerLeague.Client.Web - ASP.NET Core host server

4. SoccerLeague.Client.Web.Client - Blazor WebAssembly client

:wrench: Complete Configuration

Includes: MAUI Hybrid Setup: MauiProgram.cs configuration with Radzen services BlazorWebView integration Platform-specific settings (Android, iOS, Windows, macOS)

index.html with proper CSS/JS references

Blazor Web Setup:

Server-side Program.cs with WebAssembly components Interactive rendering modes configuration Static file and antiforgery middleware Assembly registration for shared components WebAssembly Client Setup:

WebAssemblyHostBuilder configuration

Radzen services registration

HttpClient base address setup

Authentication service injection
Shared Library: AuthenticationService with login/register/logout

Token management (access & refresh tokens)

Custom theme CSS with green color scheme

Shared imports and dependencies
:artist_palette: Styling & Theming: Custom green (#008751) primary color throughout Radzen Material theme base Responsive design patterns Loading indicators and animations Professional card and button styles
:clipboard: Prerequisites: Visual Studio 2022 (v17.8 or later) .NET 9.0 SDK installed .NET MAUI workload installed Basic understanding of Blazor

:laptop: What You'll Be Able To Do: After following this tutorial, you'll have a fully configured solution ready for: Building cross-platform mobile apps (iOS & Android) Creating desktop applications (Windows & macOS) Deploying web applications Sharing 100% of your UI code across all platforms Connecting to REST APIs with authentication
:open_file_folder: Get The Complete Source Code: :link: GitHub Repository: GitHub - benjaminsqlserver/SoccerLeagueAppWithMongoDB

Clone the repo and follow along, or use it as a reference template for your own projects! :graduation_cap: Perfect For:

Developers new to .NET MAUI Blazor Hybrid architecture

Anyone wanting to understand the multi-project setup

Developers transitioning from traditional web to cross-platform

Those confused by the Hybrid + Web template structure

Students learning modern .NET development patterns
:fire: Why This Setup Matters:

This is Microsoft's recommended approach for building modern cross-platform applications. Instead of maintaining separate codebases for web and mobile, you write your components ONCE and deploy EVERYWHERE.

This tutorial demystifies the entire setup process!

:light_bulb: Key Takeaways:

How the 4 projects communicate and share code Proper NuGet package installation across projects

Service registration in different hosting models

CSS/JS reference configuration for each platform

Authentication architecture that works everywhere

:+1: If you find this helpful: LIKE the video SUBSCRIBE for more .NET tutorials

SHARE with developers learning cross-platform development

COMMENT your questions below

:bell: Next in this series: Building authentication pages, creating protected routes, and connecting to MongoDB API! #dotnet #maui #blazor #csharp #webdevelopment #mobiledevelopment #crossplatform #aspnetcore #programming #coding #radzen

1 Like
2

Hi, thank you for the very helpful tutorial. I’ve been trying to get a maui blazor hybrid client app working previously and had an issue with the dialog service on iOS. I’ve downloaded your sample here and I’m having the same issue with it too. This is in release build and on a physical device only. Release in a simulator is working fine.

To recreate in your sample:

  1. Add your provisioning info/bundle id for iOS.
  2. In Home.razor add @inject DialogService DialogService
    and change a RadzenButton click to Click="@(() => Test())"
  3. In Home.razor.cs:
    private async Task Test()
    {
    bool? answer = await DialogService.Confirm(
    "Remove?",
    "Are you sure?",
    new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" }
    );
    }
  4. Build and test, you can open the dialog but it will not close.

In my app I get an unhandled error has occurred, but as its in release and on device I can’t find it. I’ve been trying to adjust linker/trimming settings. Any ideas?