Error Reusing Blazor Hosted Wasm in Blazor App MAUI Project

[nssidhu]

I am using Visual Studio 2022 Version 17.1.0 Preview 1.1

I have an existing Blazor Wasm Hosted App that i want to publish to Apple App Store and Google app Store.

I added .NET MAUI Blazor App(Preview) to my existing Blazor Hosted WASM Solution.

In MAUI Project i added the Project Reference to Blazor client Project. I have set MAUI as startup Project and in that i configured to run as windows desktop. I am running into few Errors as show hereunder. These error don't show when using Blazor Hosted wasm.

if i set the project reference to the Server Project in MAUI Project, i still get different errors.

I want to confirm first whether i did the setup correctly ? Secondly how do i overcome the Build/Deploy errors ?

A side Question, when using WebView in MAUI, can i refer to Remote deployed Blazor App ? if that works i don't need to include additional projects in my solutions.

Also for someone new to Mobile device Platform and one who is coming from Web Development, it would be helpful to have document on how to publish it to AppStore and Playstore as well.

[Eilon]

Hi @nssidhu , for this scenario it's best to move the Razor components into a Razor Class Library (RCL) project and then reference that RCL from the Blazor WASM and .NET MAUI Blazor projects.

We will work on getting a doc published on this to clarify what to do.

[nssidhu]

will appreciate also if docs could include all the necessary steps on publishing to Apple Store and Google Play Store. @Eilon Is it possible to reference the Remotely deployed Blazor App in WebView , if not, is it worthy to consider that feature of implementation in future?

[Eilon]

Indeed, we are working on docs for many areas of .NET MAUI. Many things are the same as they were in Xamarin.Forms so you can often refer to those docs, but of course some things are different.

With a regular .NET MAUI WebView you can point it at any remote URL and it shows whatever content is there, for example, www.microsoft.com or your own site. It doesn't matter what the site was built with - it's all HTML, JS, CSS, etc.

[nssidhu]

@Eilon

I tried loading remote site(which is Blazor Hosted WASM) and it failed to load with the following error.

    <b:BlazorWebView HostPage="https://xxxxxxxt/index.html">
        <b:BlazorWebView.RootComponents>
            <b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </b:BlazorWebView.RootComponents>
    </b:BlazorWebView>

Could you please post what correct settings would look like to remotely deployed Balzor Hosted WASM & Blazor Server ?

[nssidhu]

I was able to show website using WebView in place of BlazorWebView

<WebView x:Name="MyWebView"  Grid.Row="1" Grid.ColumnSpan="2"
                Source="https://microsoft.com" />

[Eilon]

The BlazorWebView control is for locally hosting Blazor components that run natively on the device. You can't use it for loading a remote web site.

For hosting a remote web site (any web site), use the WebView control.

[nssidhu]

@Eilon
Will Blazor Components Downloaded via WebView also run at same performance(i.e. at native speed or they have to execute via some interop's) ?

[Eilon]

If you're using a WebView pointing to a remote site (such as www.example.com) then it's just like a web browser. Everything is sandboxed.

If you use BlazorWebView then the Blazor components are built-in to the app and run locally like native code.

[mkArtakMSFT]

Closing as there is no further action pending here.