Blazor Hybrid (+.NET MAUI) Tutorial for Beginners - Build mobile, desktop, & web apps with C#

[@JamesMontemagno]

The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/jamesmontemagno04231

[@has_ali]

what about 1001th?

[@aga1nstall0dds]

I guess I'm a year and something months too late :)

[@jholloway77]

I used Blazor Hybrid for a school assignment yesterday. It is really easy to use! It did not take long to create an application which connected to a MySql database, and designing the Razor pages was very straight forward. Fingers crossed that I get a good mark and the instructor appreciates the excessive cat photos included in the app!

[@xodusgraphicdesigns3384]

I’m doing the exact same thing for my A level project. And I also made my database using MySQL. What are the chances 😅

[@letslearnwithved3104]

how did it go, do you recommend this stack for an IB IA ?

[@cernunox]

This is a great way to modernize apps, the company I work for it's creating a desktop app with WPF + Syncfusion UI but also wants to create a mobile app to work alongside the desktop app, with this I can migrate the WPF app to MAUI and use the Syncfusion Blazor compontents to counter the lack of Syncfusion MAUI components! Truly awesome way to develop applications.

[@JamesMontemagno]

Yeah I should have mentioned that but yeah all Blazor components now will light up in your app this way!

[@garzajp93]

Try Avalonia UI instead, much easier and similar to WPF

[@sigma_z]

​​@@garzajp93from my understanding, only few 3rd party controls support Avalonia. So probably not great if your WPF solution friends on 3rd party controls. Plus, I believe Avalonia is not cheap

[@mk-ep7yk]

I've heard it before, but never studied it in such detail. you got me to start xamarin again and i'm still going🙃😊🙏🙏

[@i_youtube_]

This tour made the power of .Net stack clear to me.

[@wanderingchords]

At work, but I'm gonna give this a watch tomorrow. Cant wait!

[@nessitro]

same 😅

[@emreaka3965]

Thank you, James! It's really good to see more MAUI Blazor content :)

[@codecam9213]

I need full blazor hybrid app tutorials.thanks

[@codemonkeyalpha9057]

Thanks for the walkthrough, very insightful. Feels like Cordova rebooted, and the problem with that was that web interactions didn't align with mobile users expectations. So this is all a bit pointless. I get the link to native 'code behind' is an improvement, but the issue is browser behaviour vs app behaviour. All we've really done is swapped the shared device API from JS to C# and added a bunch of new complications. Even worse, now bits of the same view can work one way, and the rest another, it's a UX consistency nightmare. When I think about all the money poured into this problem over the years I can't understand why we are stuck constantly going back over old ground that clearly didn't work. Either give up, or try something new. There seems to be this stubborn obstinate streak in devs where they can't quite see the wheel they are reinventing until it is finished. Then they just stand around looking bemused scratching their heads muttering 'hmm, it seems to be a wheel'. It makes our entire industry look like imbeciles.

[@michael_azzer]

This video is amazing! I appreciate how you go into depth and explain everything clearly and simply. You have a great way of making complex topics easy to understand. Thank you for sharing your knowledge and insights with us.

[@acodersjourney]

Thanks for being a reliable source of knowledge.

[@alkready]

Just the right level of info I was looking for.

[@raphaellukas3328]

Thank you very much for this video. Now I took the first step into mobile development and I am already looking forward to learn more. :-) *thumbs up*

[@JamesMontemagno]

AWESOME!

[@alkishadjinicolaou5831]

Excellent video! Thank you

[@JamesMontemagno]

Glad you liked it!

[@alberttakaruza5612]

POWERFULLLLLLLLLLL!! That's all i can say

[@JohnDege-p8p]

Excellent tutorial for beginners. I just subscribed to your KZbin channel, thank you.

[@imanidioli]

This is SO fantastic and amazing

[@jordansali9435]

Thank you Sir James for the very informative video.

[@LokizZzZZzz]

Hi! Can you make a video about cross-platform UI practices? I think making the one UI that can work both on portrait and album orientation is a big deal and I believe actually is a big pain in the ass.

[@ricardoaraoz4339]

Great content, thank you James for doing these videos. Awesome Stuff!

[@jd31068]

All of this is incredible stuff. Thanks for the great video!

[@HebrewLiteracy]

I'm a realtime embedded developer out of the game for a while looking to cross over to the other side; thanks for this nice overview of Maui + Blazor. Subscribed, Liked ... -Jeremiah

[@JamesMontemagno]

Awesome! Glad you enjoyed it!!

[@mjonausk]

Nice work. Thanks for the tut.

[@JamesMontemagno]

No problem!

[@NAEL4SLR]

So informative! Thanks for sharing

[@willshadow701]

Great video as always James. Thanks a lot

[@lalallalala2516]

Thank you so much for this tutorial :D ur the best !

[@JamesMontemagno]

Glad you liked it!

[@GuildOfCalamity]

Can you cover how you would enable the state/caching between nav items so that the state is preserved when switching?

[@zeetsoft]

Thank you for sharing. I love Microsoft as if it comes to make things easy, they are the one. Quoting context of Steave "Its difficult to make things easy and simple". Long live Microsoft. I learnted both blazor and xamrin from long time but there was a confusion as how to mix those knolwege. This video added lots of sens and I am sure now i can complete those pending works with my favorite .NET 7. Cheers.

[@woodydrn]

Great introduction and video, easy to follow, very nicely done. At 29:24 you could have pressed F12 -> network -> offline right?

[@Bonnie39]

how do you compile it for distribution though?

[@BrianRhody]

Great overview. This was really informative.

[@codymckinney4934]

ive migrated here. haha love the videos

[@DigitalNomadOnFIRE]

I'm getting big 70s / 80s hippie computer guy vibes here 😎

[@caneker5496]

Teşekkürler.

[@JamesMontemagno]

Thank you!

[@jjgravelle]

Love your videos. They're very educational and I get a lot out of them. That said: What the hell's a buh-in...?

[@JamesMontemagno]

A Button :) For some reason how I say it is "Buh ton"

[@amortzvi]

Why isn't Microsoft using Maui or xamarin for office applications?

[@muhammadbilalsaeed5920]

Libraries most likely. If they have libraries in JavaScript, they would prefer React Native.

[@thanoskampylis8249]

Thank you James for this amazing tutorial. Is there any support for CommunityToolkit for NET Maui Blazor Hybrid App? Can we use MVVM pattern?

[@mister_stadler]

Hi James. Thanks for the tutorial. I really appreciate it . Questions. Can I change my existing Blazor app in hybrid? Will Signalr works in Android etc. Thanks in advanced.

[@عبدالرحيمالعربي-ض1د]

nice James 🤩 can you tell us more about Share code between Blazor web apps and hybrid apps or give us a document

[@daskampffredchen]

I just do some small hobby project with Blazor. I want to make a small Storage Overview for some Canned Food and stuff. I want to make a small PC Setup with a Pi but also want it to be accessible with a phone. I want to use Barcodes with a USB scanner but want to use QR Codes with Phones so this is perfect. Now I just wonder if I can deploy MAUI to a Server and deliver different Apps depending on the Client Platform

[@bozoskopljakovic5508]

First of all thank you for all great videos and tutorials. I would like to make .net MAUI Blazor Hybrid Windows application only. Can I use local PostgreSQL database to make dbcontext and repository in order to get data, thanks.

[@nrgstudios612]

This is awesome! Just wondering if there is any noticable difference in performance between native and blazor and how well these technologies scale.

[@JamesMontemagno]

Well with web there is always some sort of performance vs native, but also there is always performance of any framework vs native implementations. Although you can also write a bad native app. Phones are fast these days though to be honest and most apps you have probalby have some web elements in them.

[@ericwong9208]

Hi this is a great video. Can you make a tutorial how to connect hybrid app with SSMS? As EF is not support android so Im trying to use SQLite, or do you have better solution for connection?

[@bdgmsoft9062]

awesome... how to use same database for web and mobile apps?

[@muslehhaj4164]

Hey James, I'd like to thank you for your awesome cool simple informative videos you have.❤🌹 1- I want to know if you have any account in "Udemy" or similar online training website? 2- I need to start learning about MAIU or Blazor both to build "Classified Ads" project , but not sure if it's the correct selection of those MAIU or Blazor both and what about API do I need to use it also for such project? please Advise me 😁👍

[@freelearnings]

Thanks, For the Tutorial

[@ashraflambe]

Hello, I want to learn MAUI. Thank you for the videos. These videos are very helpful. I tried .Net 8 full release but it is giving me errors but the same codes compiled with .Net 7 works fine. Is there a problem with MAUI and .NET 8 ? I am using the latest updated C# visual Studio.

[@crisvillalobosb]

Hi James, What architecture do you recommended for big apps. mvvm?

[@haihonguyen]

This to start a brand new project, but do you have a video to show how to integrate blazor into an existing native MAUI project? Thanks

[@JamesMontemagno]

Here you go learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview?view=net-maui-8.0#add-a-blazorwebview-to-an-existing-app

[@ChanelleClarenbach]

cool video)

[@theway5258]

Thanks bro!😀👍

[@mattkenefick]

Great video! Is it possible for the Razor syntax to separate markup from the code implementation? Sort of like codebehind with cs files?

[@somzi1]

Use a partial class for your code behind and it's is done.

[@thebrandseagle]

When you have multiple webviews then the app will open multiple browsers. How to have only single webview and native tabs. Upon changng the tab will only perform seamless navigation?

[@ignaciogomez8382]

Muchas Gracias , excelente video

[@billymartin6497]

Great video! How would I convert my Maui app to hybrid?

[@JamesMontemagno]

Checkout: learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#add-a-blazorwebview-to-an-existing-app

[@billymartin6497]

@@JamesMontemagno Thanks. Appreciate your help as always. Have a great weekend!

[@Mohsin98388]

If possible, how can I find apps built using Maui or Maui hybrid in apple or android stores? Examples of what folks have accomplished.

[@DJone4one]

Pity. When I wanted to start the application again because of the project referencing of the Razor Library, it no longer worked. According to the error, a downgrade from 7.0.1 to 7.0.0 was detected, but this only applies to the package: Microsoft.Extensions.Logging.Abstractions. I tried to reload it separately and install a newer version. Unfortunately, this still does not work. According to NuGet, there is only version 7.0.0 for the package and not higher. Even updating the SDK afterwards did not help. Presumably this is really because the NuGet packages are not yet on .NET 8 or higher than .NET 7.

[@davidkolundzic6790]

I have the same error.

[@malcolm2]

Also ran into this, @JamesMontemagno. Using VS2022, 17.7.0, with .NET framework 4.8.09037. It's a conflict between the BlazorMauiApp1 wanting to force version 7.0.0 for Microsoft.Extensions.Logging.Abstractions vs the RazorClassLibrary1 using 7.0.1. Maui does not have a 7.0.1 version. It can only jump to the preview release of 8. So the solution here is to downgrade the RazorClassLibrary1 project to 7.0.0, then the app runs fine. James probably didn't experience this because he likes the preview releases anyway.

[@DJone4one]

@@davidkolundzic6790 I also had the problem that when I wanted to create new apps, I kept getting error messages with the newer versions that the Nuget packages could not be created or restored. I got a tip from a developer that if I use the new version, I should remove the package source assignment. I had subsequently entered all the source references because it kept displaying errors. Since I removed all the references, which I had entered manually for almost every source, the error has also disappeared.

[@botyironcastle]

which one is better react native or maui hybrid ?

[@JamesMontemagno]

Depends if you are a Blazor / .NET developer or already a react developer. Accessing native controls and APIs with .NET MAUI is a nice advantage

[@emreaka3965]

IMHO anything is better than react native.

[@watherby29]

I have only one concern: how does MAUI with Blazor in it perform? How much memory requirements does this add?

[@guillermomazzari8320]

Dude!!! Thank you so much for sharing this, I am a web dev coming from MVC and Blazor (i am deeply in love with blazor) and always wondered about mobile apps, now with this, I can do both in a single project, cant thank you enough! do you have any video on how to deploy to play store and app store?

[@huntermedic]

@jamesmontemagno tell me how I'm going to write automated tests for this. Appium?

[@majormartintibor]

Would it make sense to move Pages to Shared RazorClassLibrary? If I understand it right in your current solution you would have the pages duplicated in the BlazorApp1 and BlazorMauiApp1.

[@socomjoy4563]

I'm facing the same question right now 😀 for me it worked in the end, but there were some problems to get it working. IMO just using Components (not Pages) in the Shared Lib is enough, since you are able to use tabbed views like demonstrated here in XAML instaed of whole Blazor Pages.

[@vrgamestudio294]

Is it possible to do this or something like this with a uwp application?

[@DiegoLeonPena-dy1tf]

mmmmmMMMMmmmm so if I want to use Open Maps Street this is a good option! :D

[@ahmedhasan1631]

I started a project on this architecture, maui+razor+wasm first challenge was viewmodel sharing, I managed that, not used any of maui specific (commands,alerts, preference) etc placed viewmodel in shared(razor), Created Interfaces for all the stuff which needs implementation in Maui and Web so created many services, for Navigation, platform specific, alerts etc binded same viewmodel with maui and web(works fine, happy to achieve) I am implementating 2 Uis one for Maui one for Web... Now stuck on how to use Maui Camera, its very straightforward in Maui but WEB ???

[@ahmedhasan1631]

main Challenge is not finding any help on this architecture, very few using this I wanted to use native ui for maui that's why I am not sharing UI otherwise its very straightforward to have one UI(html based) for both please create a video on this or blog which has complete details on this architecture

[@computer5211]

I aim to migrate a WPF App to Blazor/Web. How should I start? I don’t know if I’m on the right path

[@davidhouser9280]

I'm new to this from vb and vb6 but I wish to learn to make a online chat program - server based any ideas or suggestions would be great.

[@JamesMontemagno]

I would look into signalr as there are a lot of examples out there of chat apps with .net

[@alonezlciel]

Nice contents. My team at UN are trying to build a new stack with Blazor and MAUI at the moment. I have a questions regarding using MAUI API on Blazor Hybrid, if we are deploying on web, can we use that or do we have build another set of API specifically for web?

[@JamesMontemagno]

Watch this video: kzbin.info/www/bejne/pZvGp39ugKiCrdE we cover this scenario

[@smetaljuan]

Hello James!, great video! thanks a lot! would you please upload a basic video tutorial (like the monkeys app) using hybrid? cheers from Venezuela

[@kurisutofusan]

So if we want to develop for iOS, android, Windows, Mac, and Web, we need to create 3 projects: MAUI + Razor Class Library + Blazor App. Is there a way to also have MAUI include the web version too and dispense with using 3 projects?

[@JamesMontemagno]

Correct, 3 projects. Of today that is just how it works as Blazor project for Web and .NET MAUI project for mobile/desktop. .NET MAUI doesn't have a web target, closest is this hybrid approach.

[@kurisutofusan]

@@JamesMontemagno got it, thanks !

[@mdbe831]

Hi there ! Does it work under linux as a desktop application ?

[@JamesMontemagno]

.NET MAUI doesn’t support Linux today, take a look at Uno or Avanlonia

[@konstantanter]

Greetings, I have a problem:( I have a SKCanvas where I draw a map of the country by region I would like to make it possible to enlarge this image but at the same time keep the ability to get coordinates with a single click That is, to make an interactive map with a definition of where the user clicked But unfortunately, either mutilation or pressing works for me))

[@dalongvaldez]

Hi James, how do you setup a separate tablet running windows as a debugging target device

[@JamesMontemagno]

I think in visual studio you should be able to configure a remote device. Haven’t done it in a while though

[@عبدالرحيمالعربي-ض1د]

also can you tell us how or give us documentation for clean architecture in net Maui and asp net sincerely thanks and appreciation😊

[@lyvyuu]

Hi, How can I access an webapi in a razor class library? In all your component examples you have embeded data. Can you make a video? Thx

[@JamesMontemagno]

You would just inject in a httpclient into your RCL and use it here. Same as with normal Blazor

[@kobusfourie270]

Where can we ask questions about different scenarios we want to use within .net Maui not covered in videos?

[@UmmarFarooqMahroof]

Question:: in the mainpage xaml from minute 35 onwards, why are you using a blazorwebview for each "page" would it not navigate within one webview? and if this is the way to do , it seems like it would take up alot of RAM? please correct my understanding

[@JamesMontemagno]

In this instance I am using different pages on each tab so I can use native tabs. Else you would use web tabs like the podcast app does and you would navigate. When you load any page will increase consumption but as you navigate around MAUI would and should offload

[@UmmarFarooqMahroof]

@@JamesMontemagno thank you, I gotta to check the Podcast app. I been wanting to make a simple ish app for my 5 years old son, but not used xaml before, but have been using razor fort long time

[@wellington18m]

That is cool, but how do you get rounded courners i this type of apps, change titile bar background or create custome titile bar like in wpf?

[@JamesMontemagno]

If you are doing it all in web then you would just use css styling. Bootstrap is default but could use mudblazor, tailwind, etc

[@socomjoy4563]

when using for example MudBlazor, would you suggest to do just everything in Blazor (like navigation and so on instead of editing the main window in Maui)? And also do you have to install the MudBlazor NuGet 3 times (in all projects once) or just in the Shared Lib? @@JamesMontemagno

[@imsickboy9304]

I want to see more videos .NET MAUI + Blazor, someone knows where can i find more?

[@JamesMontemagno]

Checkout kzbin.infof9Twoj0nbJY?feature=share I am working on a whole series as well

[@lukaskolinsky8639]

Hi, can you please do a video on foreground service. I dont get it running.

[@RahulSharma-bh1ux]

f my maui blazor webassembly app is running on a user's machine, its contents can also be opened in an external web browser?

[@stanleyakachukwu7881]

Well done James! I tried following your guide to attempt all you have done. Then I tried new thing you did not do in the video - doing the normal blazor routing without dropping a component (created in razor class library) in another component located in maui or blazor. This does not work for me. How can I achieve that?

[@stanleyakachukwu7881]

I finally achieved what I wanted to do. And it's working as expected. Thanks for the video.

[@davidhouser9280]

I need to create a catagory list that when click show a sub cataorgy list that can be clicked. What is best way to do this? I'm using visual studios 2022 c# wpforms

[@JamesMontemagno]

I would have 2 pickers and just enable the second one once the first is picked from

[@tofansahra-kb7rv]

very good

[@tusharch0]

Hi james, thanks for this amazing video, I have one doubt how these app perform against native app, I know these maui apps are native but still if these is any difference also performance difference between maui app and maui+blazor hybrid app.

[@JamesMontemagno]

It’s a good question and really often that will depend on hardware it is running. However I have to say at this point in 2023, the hybrid model is pretty impressive speed wise. The podcast app is a great example of a great looking and performant app. There may be some tiny loads but once in app it can be pretty spot on. Again you can mix and match UI too so doesn’t all have to be web. Most of the apps you use every day are most likely hybrid IMHO at this point.

[@jholloway77]

​@@JamesMontemagno Do you think you could ever do a video comparing the different performance metrics between the two on a mobile device?

[@guytech9502]

@JamesMontemagno How to deploy blazor hybrid to IIS ?

[@JamesMontemagno]

So you would be deploying a Blazor Server app into IIS... Blazor Hybrid is for mobile/desktop, .NET is already inside of .NET MAUI. Ideally though you would deploy to app service or some other hosting as Kestrel does it all for you. Older: executecommands.com/publish-a-blazor-server-application-to-iis/ but probably works

[@DanijelJames]

Do you have a course for this? I know Blazor. And I’d like to learn Maui Hybrid.

[@danielcalota2170]

So which design pattern can be applied? MVC? MVVM?

[@JamesMontemagno]

Blazor Hybrid MVVM? MVC?? What to do? #coding #dotnetmaui #blazor

[@malcolm2]

@JamesMontemagno I noticed (for example) in BlazorApp1 there is Pages/Counter.razor and in BlazorMauiApp1 there is Pages/Counter.razor. You added the network connectivity check in the BlazorMauiApp1 version, but not on the BlazorApp1 version. We get two different versions of the page depending on where we run it. My question is, if I want identical behaviors across the app and web, can I put the pages in a single location (and where is that?)? Or are we stuck with having a separate copy of the file in each project, even if they are identical?

[@JamesMontemagno]

Checkout this video and the sample code that eilon and I did about how to share code efficiently kzbin.info/www/bejne/pZvGp39ugKiCrdE

[@JamesMontemagno]

I would recommend sharing components more and not trying a 100% as you may run into edge cases

[@MalcX]

@@JamesMontemagno ok, so basically do as much shared components (even if it's just a page) as you can, then use that across both systems. In my head, I think of shared components more as shared libraries (more of legacy thinking), so having a simple page that's a shared component took a minute to sink in. Am I thinking correctly now?

[@JamesMontemagno]

Yup yup

[@JilaniShaikh]

How can we opn multiple pages in one parent. ?? Like we add new forma in MDI?

[@JamesMontemagno]

Yes! inside of .net maui page you can have multiple blazor controls for example

[@JamesMontemagno]

Or multiple ContentViews which you can compose like you are saying

[@Alven-qj8xb]

How can I using external javascript file. I tried to used blazor hybrid but I can't use javascript 😢

[@enricoroselino7557]

soooo, is maui blazor also support tailwind like normal blazor ?

[@JamesMontemagno]

blazor hybrid is a feature of blazor and works inside of a .NET MAUI app... so everything that works in blazor works in blazor hybrid... it's blazor ;)

[@shabanelmogy7912]

Why Size Of Project is very big After deploy i wish to try to minimize size of it and make more videos about blazor hybrid i see its very good but community is small

[@mrpangads543]

can you demonstrate how can i upgrade my winform into .net maui

[@MrBastosneves]

Hi How I create a app .Net MAUI + Blazor Hybrid with material Design ?

[@JamesMontemagno]

I would use MatBlazor www.matblazor.com/

[@bobclemens8065]

What are your options when it comes to acually publishing a Blazor Hybrid app?

[@JamesMontemagno]

Where can I publish Blazor Hybrid apps? #dotnetmaui #blazor #dotnet

[@_jimbarton]

Finding it so stressful to try and mix the two. What if i don't want to use a freaking tabbed page because I've already got a navbar in blazor and my whole navigation is built to mirror my blazor website? (with anchor tags/urls) How then do I link from a native xaml page to a blazor page and vice versa? Can't find any resources other than to use a tabbed page...

[@_jimbarton]

Was hoping to just use blazor for the whole app, but my blazor maps implementation doesn't work in maui so i'm having to rewrite it to use native but then can't get it to talk to other pages... super frustrating.

[@JamesMontemagno]

Take a look at our conference talk on mixing and matching kzbin.info/www/bejne/pZvGp39ugKiCrdE you could just hide the navigation bar or make your blazor navigation bar look like the native one. Or just draw a back arrow on the native on

[@FaizulHassan-ek2mw]

Great........!

[@hoaxbuster518]

how to access hybrid app in web browser?

[@parko1965]

Subbed

[@JamesMontemagno]

Thanks buddy! Welcome!