Add WebSite project type to MAUI Hybrid project type (Blazor Hybrid + Web)

[HolyOne]

I write my code in blazor and razor in MAUI Hybrid.
It lets me to build my app for desktop and mobile, why not web?

[Brocks404]

Same question for me.
Multi Plattform Applications, Same Code but Web is not Included :(

[vhugogarcia]

If MAUI allows on preview 5 the ability to create Web Assembly either using blazor or any other will be awesome. It will be just perfect and super multiplatform, due to it can be used for platforms like LG WebOS, web systems, etc.

[Sun3]

I believe that having a single project, write code and compile for mobile, desktop, and web... is really needed. Not including the web would be not good. If you look at Flutter they already support all of these platforms.

Thanks.

[mohaaron]

I vote for this as well.

[gustav3d]

Being able to wrote both server and client side coce in ONE language for all major platforms (including Web), would be awesome.

Im not aware of any viable way of doing it now.

Flutter does this in theory, But Darts inherent bad design as language regarding performance makes it a no go on the server side and hence there is not any strong server side eco system developing.

[codemonkey85]

I would love if, at the very least, there were RCL and Blazor web (either WASM or server-side) projects included along with the MAUI project in a Blazor Maui template.

[Hecatron]

I recently worked on this which might be useful, multiple frontends where the common blazor stuff is located under DefaultBlazor.Desktop.Common
This includes Android (Maui), WinUI (Maui), Winforms, WPF, Web, Chromely (for linux)
Possibly also Mac / IOS via Maui although I've not tried that

Although bearing in mind the way Blazorwebview works is similar to server side Blazor instead of wasm
But there is a wasm template further up the directory tree as well if you're looking for one.

MudBlazor/Templates#17
https://github.com/Hecatron-Forks/MudBlazor.Templates/tree/master/DefaultBlazor.Desktop

[Eilon]

This is certainly something we will consider. We're anticipating that many developers choosing .NET MAUI Blazor will re-use Blazor components in a web app as well, so setting things up in this manner could be convenient. Of course, some people might already have RCLs that they built and want to use, so if this template also has an RCL, it might be annoying. We'll have to figure something out here!

[Hecatron]

For info you can pretty much write everything for the app in a Razor Control Library with Blazor components.
Then have a small wrapper project for hosting it on web / maui or anything else, that's what I did with the above example.
Where as DefaultBlazor.Desktop.Common is basically the whole app, and all the other projects are just hosting it in different ways.

The only thing I couldn't put into the RCL which tends to be more front end specific is the root index page where the blazor page is hosted.
You probably could put a some of it into the RCL but there are still frontend specific stuff such as which blazor js file to use for webview or server side web etc. If to use a raw index.html file (typical for winforms / wpf) or a cshtml for web etc.
Fortunately that's fairly minimal.

[evolcano]

I need a United solution, please make Blazor be a part of MAUI.
May use Blazor to Implement a new Platform-Target for WEB? Which is parallel with existed platforms of Windows, iOS and Android. You can choose to compile MAUI solution into WEB Server. The web UI can be appropriately simplified, interacting with the server and refreshing the page through server side events (or proxy).

[Hecatron]

I need a United solution, please make Blazor be a part of MAUI.
May use Blazor to Implement a new Platform-Target for WEB? Which is parallel with existed platforms of Windows, iOS and Android. You can choose to compile MAUI solution into WEB Server. The web UI can be appropriately simplified, interacting with the server and refreshing the page through server side events (or proxy).

To be clear MAUI isn't web, it's basically a renamed / newer version of Xamarin.Forms
Which was a UI library originally designed for mobile devices such as Android / IOS etc.
It was originally one of the first ways to write Android / IOS apps in CSharp outside of Java
Now MAUI also targets Windows as well as mobile, but not Linux unfortunately.

Blazor on the other hand is Web, it's main difference compared to other frameworks is that .Net code can be compiled into web assembly then run inside the web browser.
If you want something that will run as an application under Windows / Linux / Mobile etc then blazor is you're best bet with something like Mudblazor in combination with WebView2.

Blazor can be hosted "inside" MAUI / WebForms / WPF Apps using a special control called webview2 which is a stripped down version of MS Edge without all the browser bloat. It's something included by default under Windows 11 I think.
For Linux you also have options such as Chromely which is a way of running a webpage as an App similar to Electron but minus the bloat.

[danroth27]

Hi folks! Please note that we're now using this issue to track creating a single project experience for Blazor Hybrid + Web.

For folks interested in .NET MAUI supporting web as a target platform with XAML please refer to #4528.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[Eilon]

PR for this is here: #21867

There are still a few things to figure out, but for now we plan to ship a new template called .NET MAUI Blazor Hybrid and Web App that has:

1. A .NET MAUI project
2. A Blazor Web (server) project
3. A shared Razor Class Library project that has all the UI components and shared static assets (except for App.razor and index.html because they are necessarily different)
4. Optionally a Blazor WebAssembly project if the options you pick require it

Some notes:

• There is no "Authentication" option because we have yet to offer that as an option for any .NET MAUI template (but we hope to in the future!).
• We don't currently support Per-page Render Mode options during template creation. We'll consider adding this option back after BlazorWebView needs a way to enable overriding ResolveComponentForRenderMode aspnetcore#51235 is fixed, which will make it much simpler

[Kebechet]

@Eilon Wait, so it wont contain "Web" Platform in .NET MAUI project ? Because what you currently described is basically structure we use in our project. Whole logic in blazor library project and then 2 projects: Maui and Blazor Wasm that consume that project containing whole business logic.

Even though I see the benefit to have this structure as a template it still feels more like a workaround.

[alizer-in]

PR for this is here: #21867

There are still a few things to figure out, but for now we plan to ship a new template called .NET MAUI Blazor Hybrid and Web App that has:

1. A .NET MAUI project
2. A Blazor Web (server) project
3. A shared Razor Class Library project that has all the UI components and shared static assets (except for App.razor and index.html because they are necessarily different)
4. Optionally a Blazor WebAssembly project if the options you pick require it

Some notes:

• There is no "Authentication" option because we have yet to offer that as an option for any .NET MAUI template (but we hope to in the future!).
• We don't currently support Per-page Render Mode options during template creation. We'll consider adding this option back after BlazorWebView needs a way to enable overriding ResolveComponentForRenderMode aspnetcore#51235 is fixed, which will make it much simpler

When will this PR be approved?
Thank you very much.

[Eilon]

@Kebechet said:

@Eilon Wait, so it wont contain "Web" Platform in .NET MAUI project ? Because what you currently described is basically structure we use in our project. Whole logic in blazor library project and then 2 projects: Maui and Blazor Wasm that consume that project containing whole business logic.

Even though I see the benefit to have this structure as a template it still feels more like a workaround.

Yes, that's correct. In this template you get three projects: .NET MAUI Blazor Hybrid project, Blazor Web project, and a shared Razor Class Library with the shared Razor components, static assets, and other items. There is optionally a 4th project to contain the Blazor WebAssembly content (if needed).

We tried approaches where there's a single project that contains everything, but it simply doesn't work well (or at all) in too many cases. It's still something we're interested in, but the complexity of it meant that it's not something we could fit in.

If you're already following this approach, that's actually really good to hear. If you have thoughts on the challenges you've hit or successes you've had with that pattern we'd love to hear it so that we can make this as great as possible.

[Eilon]

@alizer-in said:

When will this PR be approved? Thank you very much.

There are a few more things I need to add to this PR, but it should be merged soon!

[Kebechet]

@Eilon

We tried approaches where there's a single project that contains everything, but it simply doesn't work well (or at all) in too many cases. It's still something we're interested in, but the complexity of it meant that it's not something we could fit in.

In that case is somewhere ticket regarding this flow so I can follow it ? And can you please give a few examples of those problems you experienced ?

If you're already following this approach, that's actually really good to hear. If you have thoughts on the challenges you've hit or successes you've had with that pattern we'd love to hear it so that we can make this as great as possible.

1. In comparison to Web platform the main disadvantage of this approach is that we cant use partial methods (doesnt work cross assembly). Because our platform specific services used this. And currently we had to change it to abstract classes/interfaces that are later implement on the level of the wasm or maui project.

2. The main limitation was that we couldnt have index.html in razor library but we have it copied in both WASM and Maui hybrid project what caused other problems.
   a. This cause problem with referencing other static resources. Especially images that needs relative path. We have them copied in both wasm and maui project so those paths work correctly (what is pretty ugly)
   b. For other static resources CSS, JS we used JS initializers that are in the razor library.

These are the main disadvantages we faces with this approach.

[Eilon]

Some of the problems of a single project for web + MAUI:

1. Web projects don't have a specific target framework, but rather they used the more general net8, which doesn't intrinsically mean it's a web project. That's not necessarily a big problem, but I think it's not obvious.
2. Web vs. Client/native apps often have very different requirements and things work very differently. For example if everything was in one project, you could accidentally try to call a .NET MAUI Essentials API to check the device's battery level, and it'll compile just fine but if it's running on Web, the API will either throw an exception, or if it does 'run' then it won't do the 'right' thing. There are countless examples of this. Like how you pick files. Where you store data.
3. Having the Web/Razor SDK in a MAUI project is not a well tested scenario. Probably most things just work, but sometimes an 'unexpected' SDK can cause files to be interpreted in an unexpected way. For example, a real problem that we've had to work around is that the Web and MAUI SDKs like to 'fight' over CSS files because they each think they know what's best for CSS.
4. Having certain platform-specific files is challenging. On Blazor Web you often need extra files because there's an actual web server running, plus optionally some components can run as WASM. So you might need extra static files, an Error.razor file to handle web server errors, etc.

I'm sure these are all solvable with enough time and effort, but we felt that at this time there is far too much uncertainty with that approach to try to make it a product feature.

[Eilon]

The PR is now merged! #22234

So expect this to be available in an upcoming .NET 9 preview (and also will be available in upcoming Visual Studio previews).