Document how to share components for web and native clients with Blazor Hybrid

[danroth27]

To share Blazor web UI components across web and native clients you need to factor components into shared Razor class libraries and ensure that components are implemented in a hosting model agnostic way. None of the Blazor project templates are setup this way by default, so we need to document how to do this. We should provide documentation on how to structure Blazor apps that the UI can be shared across mobile, desktop, and web.

Here's a simple example of how to set this up: https://github.com/danroth27/blazorhybridapp

The .NET Podcasts app is also structured this way: https://github.com/microsoft/dotnet-podcasts

Any hosting model specific functionality typically needs to be abstracted as interfaces and then inject service implementations for each desired platform. For example, this is how the .NET Podcasts app handles lighting up native audio playback in .NET MAUI.

Static web assets used by the components can be shared by packaging them in shared Razor class libraries as well.

[nssidhu]

Please also include the following scenarios in your document.

1. When RCL is using Nuget Package, the way to reference Script & CSS Files in MAUI Project(or consuming project) is unchanged, It should be referenced as you would do it when including Nuget in your NON-RCL project and that the special way to reference script/css only applies to custom script and css files being created in RCL Project.
2. When using components that requires permission like GPS co-ordinates. This requires adding additional code.
3. When using components that requires Camera Permissions. This requires adding additional code.

I am creating sample that is using both GPS and Camera in MAUI Blazor with RCL for each Google Map and QrCode Scanning. So far I was able to get Google Map(GPS) working for RCL , but struggling with QRCode(using Camera) in RCL (Just works on windows only)

Here is the project that I am working on that is using RCL for GoogleMap(requires GPS) and RCL for Camera(for QrCode scanning) https://github.com/nssidhu/MAUIBlazorGPSIssue.App I am using the class library from https://github.com/MackinnonBuck/MauiBlazorPermissionsExample for handling permissions. The library is using very clever way of excluding non platform specific files by adding code to exclude in .csproj file. Not sure if there is better way of doing it?