🚀 Setup .NET MAUI Blazor Hybrid(mobile) & Web App from Scratch | Complete Configuration Guide
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!
🎯 What This Tutorial Covers:
✅ Creating the .NET MAUI Blazor Hybrid and Web App Template - Step-by-step project creation
✅ Understanding the Solution Structure - 4 projects working together seamlessly
✅ Configuring All Project Files - .csproj, Program.cs, and configuration files
✅ Adding Radzen Blazor Components - Professional UI library integration
✅ Setting Up Authentication Services - Complete AuthenticationService implementation
✅ Custom Theme Configuration - Beautiful green (#008751) soccer-themed styling
✅ Shared Code Architecture - Write once, run on Web, Android, iOS, Windows, macOS
✅ HttpClient Setup - API integration ready for all platforms
📂 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
🔧 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
🎨 Styling & Theming:
Custom green (#008751) primary color throughout
Radzen Material theme base
Responsive design patterns
Loading indicators and animations
Professional card and button styles
📋 Prerequisites:
Visual Studio 2022 (v17.8 or later)
.NET 9.0 SDK installed
.NET MAUI workload installed
Basic understanding of Blazor
💻 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
📂 Get The Complete Source Code:
🔗 GitHub Repository: https://github.com/benjaminsqlserver/...
Clone the repo and follow along, or use it as a reference template for your own projects!
🎓 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
🔥 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!
💡 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
👍 If you find this helpful:
LIKE the video
SUBSCRIBE for more .NET tutorials
SHARE with developers learning cross-platform development
COMMENT your questions below
🔔 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