Blazor Hybrid (+.NET MAUI) Tutorial for Beginners - Build mobile, desktop, & web apps with C#
Vložit
- čas přidán 3. 08. 2024
- The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/jamesmontemagno04231
Let's start our journey together to build beautiful hybrid multi-platform apps across mobile, desktop, and web with .NET MAUI, Blazor, C#, .NET, and Visual Studio! In this video I am going to guide you through the entire process and describe everything that is in File - New Project for a Blazor Hybrid app with .NET MAUI to build hybrid web apps for iOS, Android, macOS, and Windows. We then will look at how to share Blazor components across these platforms and a full Blazor website. That's right, target mobile, desktop, and the web and share UI components and logic across them all. We will explore what Blazor Hybrid is, how it works, what you need to get started, how to deploy and debug, navigate, style your app, and so much more. We of course will finish with looking at how to mix and match UI components to build a Hybrid app, access native APIs, and so much more!
Links:
Source Code: github.com/jamesmontemagno/Bl...
* My .NET MAUI Playlist: • .NET MAUI for Beginners
* 4-Hour .NET MAUI Workshop: • Learn .NET MAUI - Full...
* .NET MAUI Beginner's Series: • .NET MAUI for Beginners
* .NET Beginner Videos: dotnet.microsoft.com/learn/vi...
* .NET Conf Talk: • Create native desktop ...
* Blazor Hybrid Docs: learn.microsoft.com/aspnet/co...
* .NET MAUI Documentation: docs.microsoft.com/dotnet/mau...
* .NET Podcasts Project: github.com/microsoft/dotnet-p...
* Microsoft Learn Training: docs.microsoft.com/learn/path...
* Platform APIs: docs.microsoft.com/dotnet/mau...
* Visual Studio: visualstudio.microsoft.com/?W...
Join this channel to get access to perks:
/ @jamesmontemagno
👕 Buy some swag! - jamesmontemagno.myspreadshop....
☕️ Buy me a coffee - www.buymeacoffee.com/jamesmon...
Follow:
👨💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
Chapters:
00:00 - Intro
02:10 - .NET MAUI & Blazor Overview
08:16 - Sponsor: Skillshare
09:56 - Get Started with Blazor Hybrid with Visual Studio 2022
10:40 - Creating your first Blazor Hybrid project
12:10 - Exploring Blazor Hybrid projects
16:28 - App startup, dependency injection, and main page with BlazorWebView
20:00 - Deploy Blazor Hybrid to Windows
22:30 - Deploy Blazor Hybrid to Android (emulators and management)
24:00 - Access native APIs in Blazor Hybrid
29:45 - Deploying to iOS and Mac
30:25 - Share code between Blazor web apps and hybrid apps
34:30 - Mixing and Matching Web and Native UI
41:30 - Platform specific UI tweaks
42:30 - Wrap-up and final thoughts
Disclaimer: This channel, videos, and streams are created in my spare time and are a product of me... James Montemagno! They are NOT officially affiliated or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
What is on my hat? It is the CLE clothing logo because I am from Cleveland! Checkout their awesome CLE merch: cleclothingco.myshopify.com/
What is that art on my wall? It is an original piece from the French street artist Gregos of La Butte Montmartre: / bcez1onhiqx
Special thanks to Skillshare for sponsoring this video.
My Setup:
📷 Canon M50 Mark II - amzn.to/3P8R7lp
💡 Nanoleaf Elements Lights - amzn.to/3umwJVW
🎙 Blue Spark Microphone - amzn.to/3qgtYkq
🎙 Blue Pop Filter - amzn.to/3jEWM3r
🤳 Rode Microphone Arm - amzn.to/2Z68AlE
🎧 Sony MDR7306 Headphones - amzn.to/372jxta
📲 Stream Deck - amzn.to/373Uk1n
📹 Elgato Cam Link - amzn.to/3a9eGbh
📷 GoPro Hero - amzn.to/374lm90
🖱 MX Master 2S Mouse - amzn.to/3d7J2gj
⌨️ Tecware Phantom Keyboard - amzn.to/3aUP4y9
#dotnet #blazor #dotnetmaui #blazorhybrid #programming #aspnetcore #visualstudio - Věda a technologie
The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/jamesmontemagno04231
what about 1001th?
I guess I'm a year and something months too late :)
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!
I’m doing the exact same thing for my A level project. And I also made my database using MySQL. What are the chances 😅
Thank you, James! It's really good to see more MAUI Blazor content :)
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.
This tour made the power of .Net stack clear to me.
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.
Yeah I should have mentioned that but yeah all Blazor components now will light up in your app this way!
Try Avalonia UI instead, much easier and similar to WPF
@@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
I've heard it before, but never studied it in such detail. you got me to start xamarin again and i'm still going🙃😊🙏🙏
All of this is incredible stuff. Thanks for the great video!
Just the right level of info I was looking for.
Thanks for being a reliable source of knowledge.
Great content, thank you James for doing these videos. Awesome Stuff!
Great video as always James. Thanks a lot
Thank you Sir James for the very informative video.
So informative! Thanks for sharing
Excellent tutorial for beginners. I just subscribed to your CZcams channel, thank you.
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.
Great overview. This was really informative.
At work, but I'm gonna give this a watch tomorrow. Cant wait!
same 😅
This is SO fantastic and amazing
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*
AWESOME!
Great tutorial. Thanks!
Thank you so much for this tutorial :D ur the best !
Glad you liked it!
Nice work. Thanks for the tut.
No problem!
I need full blazor hybrid app tutorials.thanks
POWERFULLLLLLLLLLL!!
That's all i can say
Excellent video! Thank you
Glad you liked it!
Love your videos. They're very educational and I get a lot out of them.
That said: What the hell's a buh-in...?
A Button :)
For some reason how I say it is "Buh ton"
ive migrated here. haha love the videos
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
Awesome! Glad you enjoyed it!!
Thanks bro!😀👍
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.
cool video)
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.
Can you cover how you would enable the state/caching between nav items so that the state is preserved when switching?
nice James 🤩 can you tell us more about Share code between Blazor web apps and hybrid apps or give us a document
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.
very good
Why isn't Microsoft using Maui or xamarin for office applications?
Thank you James for this amazing tutorial. Is there any support for CommunityToolkit for NET Maui Blazor Hybrid App? Can we use MVVM pattern?
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?
Great........!
Teşekkürler.
Thank you!
how do you compile it for distribution though?
I'm getting big 70s / 80s hippie computer guy vibes here 😎
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 😁👍
awesome... how to use same database for web and mobile apps?
Hello James!, great video! thanks a lot! would you please upload a basic video tutorial (like the monkeys app) using hybrid? cheers from Venezuela
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?
Hi James, What architecture do you recommended for big apps. mvvm?
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.
Muchas Gracias , excelente video
Subbed
Thanks buddy! Welcome!
Thanks, For the Tutorial
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?
Watch this video: czcams.com/video/ojcvL8KCOwo/video.html we cover this scenario
This is awesome! Just wondering if there is any noticable difference in performance between native and blazor and how well these technologies scale.
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.
also can you tell us how or give us documentation for clean architecture in net Maui and asp net sincerely thanks and appreciation😊
Hi, can you please do a video on foreground service. I dont get it running.
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
Great video! Is it possible for the Razor syntax to separate markup from the code implementation? Sort of like codebehind with cs files?
Use a partial class for your code behind and it's is done.
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.
mmmmmMMMMmmmm so if I want to use Open Maps Street this is a good option! :D
Do you have a course for this? I know Blazor. And I’d like to learn Maui Hybrid.
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?
I finally achieved what I wanted to do. And it's working as expected. Thanks for the video.
May the Survey Prompt rest in peace, I barely knew ye (for 5 years).
👏👏👏👏
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.
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.
@@JamesMontemagno Do you think you could ever do a video comparing the different performance metrics between the two on a mobile device?
If possible, how can I find apps built using Maui or Maui hybrid in apple or android stores? Examples of what folks have accomplished.
I have only one concern: how does MAUI with Blazor in it perform? How much memory requirements does this add?
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.
I have the same error.
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.
@@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.
Placeholder text not showing for inputdate in android , which shows in windows app.
Great video! How would I convert my Maui app to hybrid?
Checkout: learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#add-a-blazorwebview-to-an-existing-app
@@JamesMontemagno Thanks. Appreciate your help as always. Have a great weekend!
Hi James, how do you setup a separate tablet running windows as a debugging target device
I think in visual studio you should be able to configure a remote device. Haven’t done it in a while though
@jamesmontemagno tell me how I'm going to write automated tests for this. Appium?
f my maui blazor webassembly app is running on a user's machine, its contents can also be opened in an external web browser?
Is it possible to do this or something like this with a uwp application?
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.
I would look into signalr as there are a lot of examples out there of chat apps with .net
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?
If you are doing it all in web then you would just use css styling. Bootstrap is default but could use mudblazor, tailwind, etc
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
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
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
@@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
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
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
Where can we ask questions about different scenarios we want to use within .net Maui not covered in videos?
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))
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 ???
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
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
You would just inject in a httpclient into your RCL and use it here. Same as with normal Blazor
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.
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.
which one is better react native or maui hybrid ?
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
IMHO anything is better than react native.
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?
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.
@@JamesMontemagno got it, thanks !
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
I would have 2 pickers and just enable the second one once the first is picked from
can you demonstrate how can i upgrade my winform into .net maui
Hi there !
Does it work under linux as a desktop application ?
.NET MAUI doesn’t support Linux today, take a look at Uno or Avanlonia
What are your options when it comes to acually publishing a Blazor Hybrid app?
Where can I publish Blazor Hybrid apps? #dotnetmaui #blazor #dotnet
How can I using external javascript file. I tried to used blazor hybrid but I can't use javascript 😢
how to access hybrid app in web browser?
So which design pattern can be applied? MVC? MVVM?
Blazor Hybrid MVVM? MVC?? What to do? #coding #dotnetmaui #blazor
How can we opn multiple pages in one parent. ?? Like we add new forma in MDI?
Yes! inside of .net maui page you can have multiple blazor controls for example
Or multiple ContentViews which you can compose like you are saying
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...
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.
Take a look at our conference talk on mixing and matching czcams.com/video/ojcvL8KCOwo/video.html 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
I want to see more videos .NET MAUI + Blazor, someone knows where can i find more?
Checkout czcams.com/users/shortsf9Twoj0nbJY?feature=share I am working on a whole series as well
soooo, is maui blazor also support tailwind like normal blazor ?
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 ;)
@JamesMontemagno
How to deploy blazor hybrid to IIS ?
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
so how is that better than Flutter ?