0

I'm trying to build an application using a Blazor Hybrid Webview, which can be run both from a .NET MAUI application as well as a WPF application. All Pages/Components/Routing etc. are located in a Razor class library (the GUI library). I can't get the wwwroot to the contained in the UI library however.

In both WPF and MAUI the BlazorView hostpage needs to be a static file, wwwroot\index.html, which has to be located inside the running application. I don't want to have to copy things like images and styles all the time. They need to be in the UI library.

I tried all methods of including the folder in the running project, like

 <ItemGroup>
        <Content Include="..\GUI.Blazor\wwwroot\**" CopyToOutputDirectory="Always"/>
    </ItemGroup>

And also by directly using the UIs index.html by creating the BlazorWebview like this

<BlazorWebView HostPage="../GUI.Blazor/wwwroot/index.html">
    </BlazorWebView>

But with no success, I keep getting an error saying the folder isn't found, or Blazor simply crashes

GottaLovePizzas
  • 165
  • 10
  • Not sure I follow what you're saying. Isn't wwwroot where the compiled version of your web stuff will be copied to? Why aren't you referencing where the source is? – Andy Jan 23 '23 at 12:19
  • The wwwroot just contains an index.html which uses js to initiate Blazor, and some static files like fonts and images – GottaLovePizzas Jan 23 '23 at 17:40

1 Answers1

0

I don't want to have to copy things like images and styles all the time.

It seems impossible.

If you create MAUI app project:

1.Add the Razor SDK, Microsoft.NET.Sdk.Razor to your project by editing its first line of the CSPROJ project file:

<Project Sdk="Microsoft.NET.Sdk.Razor">

2.Add the root Razor component for the app to the project.

3.Add your Razor components to project folders named Pages and Shared.

4.Add your static web assets to a project folder named wwwroot.

5.Add any optional _Imports.razor files to your project.

6.Add a BlazorWebView to a page in your .NET MAUI app, and point it to the root of the Blazor app:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyBlazorApp"
             x:Class="MyBlazorApp.MainPage">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

7.Modify the CreateMauiApp method of your MauiProgram class to register the BlazorWebView control for use in your app. To do this, on the IServiceCollection object, call the AddMauiBlazorWebView method to add component web view services to the services collection:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddMauiBlazorWebViewDeveloperTools();
#endif
        // Register any app services on the IServiceCollection object
        // e.g. builder.Services.AddSingleton<WeatherForecastService>();

        return builder.Build();
    }
}
Jianwei Sun - MSFT
  • 2,289
  • 1
  • 3
  • 7