Development Machine Setup for Blazor Hybrid [Pt 2] | Blazor Hybrid for Beginners

[Music] welcome back everyone to the Blazer hybrid beginner series I'm your host James Monto Magno a program manager on the developer Community team here Microsoft now in the first video we talked about what Blazer hybrid is what you can build with it and how it works directly with d Maui and in this video I want to show you how you can get your development machine set up with Visual Studio 2022 or Visual Studio code no matter where you're developing so let's go ahead and get started now the first place that you'll want to go is visual studio.com there it is now here this will give you information about visual studio and visual studio code let's first get started with Visual Studio here on Windows there are many additions available so if you already have a license for Pro or Enterprise you're good to go download and install that or if you are looking to get started you can use the free version for individual developers AC academic users and open source projects in the community Edition just go ahead and click on that now this will download the visual studio setup and you can click on it to open the visual studio installer once that opens it'll look a little bit like this it's going to show you all of the workloads that are available inside of Visual Studio 2022 for Blazer hybrid development we're going to want to select two different workloads first is the asp.net core and web development workload this will give you everything that you need for web development so we can build our Blazer web apps to build Blazer hybrid applications with d Maui we're going to need to select the Maui workload this will give us everything that we need for iOS Android Mac and windows and it will also bring in the Blazer hybrid controls as well that's it simply click install and it'll give you everything that you need once that's done installing you'll want to open up visual studio 2022 and we'll go ahead and verif ver ify that everything is set up and ready I'll select new project and we can see that there are a lot of different project templates available console app web apps apis class librar so much more here in the top right we can filter this down we can see Blazer Blazer hybrid and Maui applications and everything else if I select the Blazer hybrid we'll see theet Maui Blazer hybrid app so here we are now 100% set up inside a visual studio we can create our project and we can dive through the architecture but before we do that I want to also show you how to get set up inside of Visual Studio code so that means if you're running on Windows Mac or Linux you can also do development there so let's head back over to visual studio.com and here we cane and look at Visual Studio code I can learn more and head over to the visual studio code page and I can decide what operating system I'm running on here I'm running on windows so I can go ahead and select install Visual Studio code this will Super quickly install Visual Studio code now at this point there's no workloads to install it just gives you the base Visual Studio code install and when it's done installing we can simply open it and we get Visual Studio code this is our lightweight code editor now from here if we want to get started building net Maui applications we're going to need to install the net Maui extension now Visual Studio gave us every single thing that we needed when we in installed the asp.net workload and theet Maui workload it gave us the sdks it gave us an emulator setup it gave us simulator connections it gave us SDK management it installed theet runtime automatically for us for development with vs code since it's a lightweight code editor we're going to need to install things manually but Visual Studio code and the extensions will guide us through the process here I'm going to click on the extensions on the Le hand side and we can search forn net Maui now here we can tap on the official donet Maui extension here from Microsoft that you can see now what's great about this is that it will walk us through in our little details here of how this works it will not only install the D extension but it will also install the C and the C devkit extension as dependencies here this will enable us to create Mi projects it will enable us to debug them and a lot more now I mentioned that this is available on different operating systems but it also means that based on where you're working different sdks and emulators are available to you so if you're on Windows you can do Windows and Android development on Mac Android iOS and mac and on Linux Android development so all we need to do is simply click install now from here the net Maui extension for visual studio code will also install that C and C devkit extension automatically for us so this just takes a few seconds to download the extension and install it into VSS code now also the DMI extension and other extensions in VSS code are often getting regular updates so you can see here that this is a preview and you can even opt in once it's installed for additional faster updates as well here we can see that there's a pre-release version available so if you want to be a little bit more on The Cutting Edge you can always opt for that all right so here our extension is installed automatically for us and we are ready to go now here we'll also want to scroll down and make sure that we have dotnet installed and that's really important so here this is telling us that this is required to install this and also how to set up the Android SDK now like I said Visual Studio 2022 handled this all for us so we're going to want to make sure that we do that here when we create our project so we can go ahead and look to go to the terminal and see if you have net installed now I will because I have Visual Studio 2022 installed so I can sayet D- version and this is going to show me that I have donet 8 installed on my machine now if you don't have donet or you get something that says net isn't here on your machine you're going to want to go back to your browser and head over to dot.net and here you can click download and download the net SDK that's available for your op operating system now you might need to restart Visual Studio code but once you do you can write net d-v and it should show you there now from there we'll want to install the net Maui SDK as well so I'm going to sayet workload list this is going to show me all of the workloads that are installed and where the installation Source was so here we can see that I have Maui iOS Windows Mac Catalyst Android and more if you don't have anything installed you'll want to install theet ma workload by executing net workload install Maui this will give you everything that you need to get up and running now from there like I said you may want to close down visual studio and reopen it just to make sure everything is good so let's just go ahead and do that just to make sure everything is configured automatically and vs code opens real quick awesome okay so like we were able to create new projects in Visual Studio 2022 we can do the same here in vs code by going to the Explorer and then tapping on the create. net project button here this is now going to show us all of our project templates based on what we have installed so we can see here we have our Blazer applications class libraries and so much more if I wanted to get started building the donm Blazer hybrid app here it is at the very very top once you have Visual Studio code the extension the net SDK and the net Maui workload everything will be set up and ready to go inside a visual studio code all right we're set up and we are ready to go for this video series I will end up using visual studio 2022 here on Windows to build out this application and show you the tooling that's built in to manage emulators deploy debug on the different operating systems now from Visual Studio 2022 we'll be able to build for iOS and Android and Windows directly on our Windows machine for Mac I'll would go over to my Mac and deploy there so that's what we're going to do in the next video we're going to go ahead and create our very first Blazer hybrid application I'm going to walk you through the entire architecture so you understand what's in the box and then we're going to start building our user interface so now that you're set up let's get started building our first Blazer hybrid application so stay [Music] tuned

Channel: dotnet

Views: 5,790

Keywords: .NET, Blazor, Blazor Hybrid

Id: kOuRsH_2gQc

Length: 9min 3sec (543 seconds)

Published: Fri Nov 10 2023