Blazor Desktop

Development

1. Install required .NET MAUI dependencies described in the .NET MAUI Development Guide.
2. Follow the other instructions on that guide for how to build, open the solution, etc.

Issue tracking

The area-blazor label is used to track Blazor Hybrid items: https://github.com/dotnet/maui/issues?q=is%3Aissue+is%3Aopen+label%3Aarea-blazor

Sources, samples, and tests

The Blazor-related projects in the repo are mostly located in the src/BlazorWebView folder, aside from the MAUI sample app:

WinForms	WPF	.NET MAUI
source	source	source
-	-	templates net9 solution template
sample	sample	sample
-	-	tests

BlazorWebView

The main component on each platform is the BlazorWebView control. They each have a unique implementation in the source locations above, though they do use some shared source for Windows/WebView2 related code.

ASP.NET Core

The core WebView integration with Blazor is handled within the dotnet/aspnetcore repo here.

Debugging Blazor Hybrid with experimental ASP.NET Core bits

Sometimes it may be necessary to make changes in dotnet/aspnetcore, and react to the changes in this repo. The following are steps which outline the general process in using ASP.NET Core development nupkgs with MAUI.

Steps

1. Checkout dotnet/aspnetcore, and follow the initialization instructions in the Build From Source guide.

2. ./restore.cmd

3. . ./activate.ps1

4. Make the desired changes in dotnet/aspnetcore.

5. ./eng/build.cmd -pack. The -pack option causes the creation of NuGet packages.

   • Note packing the full repo is only required upon the first change. Subsequent changes are likely to be isolated in src/Components, hence you should be able too use .\src\Components\build.cmd -pack.

6. You should see the generated packages in the aspnetcore\artifacts\packages\Debug\NonShipping directory. The packages should end with x.0.0-dev.nupkg where x is the current (pre-release) .NET version OR y.0.patch.nupkg where y is the current (released) .NET version and patch is the current patch version (ex. 6.0.4.nupkg). We'll refer to the version seen here as VERSION in subsequent steps.

7. Open razor-tooling/NuGet.config and add the local package sources:

   • dotnet nuget add source "<PATH_TO_ASPNET_CORE_REPO>\artifacts\packages\Debug\Shipping\" --name "ASPNETCORE_SHIPPING"
   • dotnet nuget add source "<PATH_TO_ASPNET_CORE_REPO>\artifacts\packages\Debug\NonShipping\" --name "ASPNETCORE_NONSHIPPING"

8. Open maui/eng/Versions.props and update all the MicrosoftAspNetCore*PackageVersion and MicrosoftJSInteropPackageVersion to reflect the VERSION.

9. Go to <USER_HOME>\.nuget\packages\microsoft.aspnetcore.components.webview and delete the directory named VERSION. This clears the nuget cache.

10. Run dotnet restore in the directory for the app you're trying the experimental aspnetcore changes in (ex. \src\BlazorWebView\samples\BlazorWpfApp).

11. You can now run the application and it'll use the experimental aspnetcore changes. Note, subsequent changes in the aspnetcore repo will require rebuilding (.\src\Components\build.cmd -pack) and repeating the previous two steps (clear nuget cache, run dotnet restore).

Teams Channel (Microsoft internal)

Go to this channel (and request to join if you don't have access).

Getting Started working on Blazor Hybrid brownbag (Microsoft internal)

Watch the recording of a brownbag session on working on Blazor Hybrid (Microsoft internal)