Blazor Hybrid (+.NET MAUI) Tutorial for Beginners - Build mobile, desktop, & web apps with C#
Ғылым және технология
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
Пікірлер: 175
The first 1,000 people to use the link will get a 1 month free trial of Skillshare: skl.sh/jamesmontemagno04231
@twitterer
Жыл бұрын
what about 1001th?
@aga1nstall0dds
25 күн бұрын
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!
@xodusgraphicdesigns3384
10 ай бұрын
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 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
9 ай бұрын
@@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!
This tour made the power of .Net stack clear to me.
Just the right level of info I was looking for.
Great content, thank you James for doing these videos. Awesome Stuff!
Thanks for being a reliable source of knowledge.
Great video as always James. Thanks a lot
Thank you Sir James for the very informative video.
At work, but I'm gonna give this a watch tomorrow. Cant wait!
@nessitro
Жыл бұрын
same 😅
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.
So informative! Thanks for sharing
This is SO fantastic and amazing
Excellent tutorial for beginners. I just subscribed to your KZread channel, thank you.
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!
Great overview. This was really informative.
Great tutorial. Thanks!
Thank you so much for this tutorial :D ur the best !
@JamesMontemagno
11 ай бұрын
Glad you liked it!
Nice work. Thanks for the tut.
@JamesMontemagno
11 ай бұрын
No problem!
POWERFULLLLLLLLLLL!! That's all i can say
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!!
Excellent video! Thank you
@JamesMontemagno
9 ай бұрын
Glad you liked it!
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.
I need full blazor hybrid app tutorials.thanks
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?
Thanks bro!😀👍
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"
Can you cover how you would enable the state/caching between nav items so that the state is preserved when switching?
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.
cool video)
ive migrated here. haha love the videos
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
Great........!
Thank you James for this amazing tutorial. Is there any support for CommunityToolkit for NET Maui Blazor Hybrid App? Can we use MVVM pattern?
awesome... how to use same database for web and mobile apps?
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?
Teşekkürler.
@JamesMontemagno
6 ай бұрын
Thank you!
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.
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
Hi James, What architecture do you recommended for big apps. mvvm?
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 😁👍
Muchas Gracias , excelente video
Hello James!, great video! thanks a lot! would you please upload a basic video tutorial (like the monkeys app) using hybrid? cheers from Venezuela
Thanks, For the Tutorial
how do you compile it for distribution though?
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.
Why isn't Microsoft using Maui or xamarin for office applications?
This is awesome! Just wondering if there is any noticable difference in performance between native and blazor and how well these technologies scale.
@JamesMontemagno
5 ай бұрын
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.
Hi, can you please do a video on foreground service. I dont get it running.
Subbed
@JamesMontemagno
10 ай бұрын
Thanks buddy! Welcome!
also can you tell us how or give us documentation for clean architecture in net Maui and asp net sincerely thanks and appreciation😊
I'm getting big 70s / 80s hippie computer guy vibes here 😎
If possible, how can I find apps built using Maui or Maui hybrid in apple or android stores? Examples of what folks have accomplished.
Great video! Is it possible for the Razor syntax to separate markup from the code implementation? Sort of like codebehind with cs files?
@somzi1
5 ай бұрын
Use a partial class for your code behind and it's is done.
@jamesmontemagno tell me how I'm going to write automated tests for this. Appium?
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
f my maui blazor webassembly app is running on a user's machine, its contents can also be opened in an external web browser?
I have only one concern: how does MAUI with Blazor in it perform? How much memory requirements does this add?
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: kzread.info/dash/bejne/oZ6X2K5xe6a1p9I.html we cover this scenario
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))
Placeholder text not showing for inputdate in android , which shows in windows app.
Is it possible to do this or something like this with a uwp application?
Do you have a course for this? I know Blazor. And I’d like to learn Maui Hybrid.
mmmmmMMMMmmmm so if I want to use Open Maps Street this is a good option! :D
👏👏👏👏
Where can we ask questions about different scenarios we want to use within .net Maui not covered in videos?
What are your options when it comes to acually publishing a Blazor Hybrid app?
@JamesMontemagno
7 ай бұрын
Where can I publish Blazor Hybrid apps? #dotnetmaui #blazor #dotnet
can you demonstrate how can i upgrade my winform into .net maui
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.
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
11 ай бұрын
I would look into signalr as there are a lot of examples out there of chat apps with .net
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!
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
how to access hybrid app in web browser?
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
9 ай бұрын
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
@JamesMontemagno
10 ай бұрын
You would just inject in a httpclient into your RCL and use it here. Same as with normal Blazor
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?
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
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
3 ай бұрын
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
How can I using external javascript file. I tried to used blazor hybrid but I can't use javascript 😢
May the Survey Prompt rest in peace, I barely knew ye (for 5 years).
I want to see more videos .NET MAUI + Blazor, someone knows where can i find more?
@JamesMontemagno
8 ай бұрын
Checkout kzread.infof9Twoj0nbJY?feature=share I am working on a whole series as well
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
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
3 ай бұрын
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.
Hi there ! Does it work under linux as a desktop application ?
@JamesMontemagno
3 ай бұрын
.NET MAUI doesn’t support Linux today, take a look at Uno or Avanlonia
soooo, is maui blazor also support tailwind like normal blazor ?
@JamesMontemagno
7 ай бұрын
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 ;)
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
11 ай бұрын
I have the same error.
@malcolm2
11 ай бұрын
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
8 ай бұрын
@@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.
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
10 ай бұрын
I would have 2 pickers and just enable the second one once the first is picked from
@JamesMontemagno How to deploy blazor hybrid to IIS ?
@JamesMontemagno
11 ай бұрын
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
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.
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
10 ай бұрын
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
10 ай бұрын
@@JamesMontemagno got it, thanks !
so how is that better than Flutter ?
So which design pattern can be applied? MVC? MVVM?
@JamesMontemagno
10 ай бұрын
Blazor Hybrid MVVM? MVC?? What to do? #coding #dotnetmaui #blazor
Hi How I create a app .Net MAUI + Blazor Hybrid with material Design ?
@JamesMontemagno
6 ай бұрын
I would use MatBlazor www.matblazor.com/
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