Transcript for:
Setting Up a Multiplatform Development Environment for .NET MAUI with Visual Studio Code

if you're looking to start your journey building multiplatform desktop and mobile applications with net Maui and visual studio code you've come to the right place no matter what you're developing on whether it's Windows Mac or Linux I got you covered with a full end to end start to finish from scratch developer environment setup so you can start building iOS Android Mac and windows applications today all using Don Maui and visual studio code so let's get into it [Music] hey everyone I'm James and if you're looking for net Maui guides tutorials tips and tricks and so much more you're in the right place so make sure you jam on that subscribe button so you get notified every time I put out a video right here on my channel now if you watch any of my other videos on D Maui you may have notice that I often use Visual Studio 2022 to do all my downa Maui development I I actually just mostly on Windows most of the time but I do have my Mac machine and that's where Visual Studio code comes in enabling me to build on Windows Mac or on Linux which is really great now Visual Studio 2022 it gives me a checkbox to get everything set up it's an integrated development environment it handles installing Java the sdks the emulators all that stuff for me but since Visual Studio code is a lightweight code editor we have extensions built on top of it like the C devkit and the dam Mai extension attention now what I wanted to do today is show you everything that you need to know to actually get set up because it is a little bit more of a manual process based on the different operating systems you want to develop for and the operating systems that you are developing on so that means that yes you can develop on Windows Mac or on Linux and in fact I'm going to show you my Mac setup I actually reformatted my Mac machine my MacBook Air over here with an M1 processor to actually set it up from scratch from end to end so backed everything up to one drive refresh everything reset it and that's what we're going to see today before we jump into that I want to talk about what you can develop and where because that's an important thing to think about based on what you need to develop for so since different sdks and emulators or simulators are available on different operating systems means that you're not going to be able to develop for every single OS on every single platform let's start with the basics if you're on Windows you can use Visual Studio 2022 or Visual Studio code to do D inm development and if you're using visual studio code you can develop for Windows because obviously the windows SDK and everything's there for you to deploy locally and you can also develop for Android now since Android and Android studio and the emulators and sdks are on Windows you have everything you need to jump between those two platforms now if you're on Mac like I'm going to be setting up today you can obviously still developed for Android because also Android Studio sdk's emulators are there on your Mac and then Additionally you can get set up to do local Mac development and also iOS and iPad development as well and then finally if you're looking to develop on a Linux machine then that will be limited to just Android development because the Android emulators and sdks are there for you so based on what you need you can jump between those different uh environments that you're going to need so today I'm going to show end to end Mac OS setup with Visual Studio code but I want to let you know that obviously all the things I'm going to show you apply to the other operating systems and I'll put links to all the documentation that will guide you through the different sort of uh quirks on the different operating systems so let's go ahead and get into it okay so the very first thing that I want to show you is theet Maui documentation there's all sorts of different reference guides and tutorials but there is an insulation guide as well in fact this installation guide will show you visual studio and vs code and everything that you need to know we're actually going to come back to it and reference it because there's a lot of great information here that will help us make decisions for our needs in our operating system now the first thing that we do need to install isnet and theet Mau workload you can go to.net dot.net or net. microsoft.com or if you're on the documentation hit download.net now on the down net website you can hit download and and as of this time of recording donet 8 is our long-term support and I'm automatically here set up on Apple silicon so it knows what to pick but donet runs everywhere so whether you're on Mac windows or Linux there's an install for you so you can click on this all donet downloads or Don 9 or Don 10 or whatever you're on and you can get the different installers that you may need for your operating system so this will install the donet SDK based on what you need so if you need x86 or arm builds different dros definitely check that out okay so let's first and foremost install.net oneclick install boom and I'm just simply going to go ahead and save this and then click open and of course your download speed will vary based on your download speed so just a few button clicks will install theet SDK on your machine and this is the same on Linux or on Windows as well so nothing different here so this does just take a few seconds to install and you're good to go now one thing I want to talk about is that this includes the dad SDK the runtime and the asp9 at core runtime so you can actually start building console applications web applications right away but donet Maui is distributed through a workload which is an additional install on top of the dad SDK so we're going to need to install that next so let me go ahead and close this I'll just move that to the trash perfect and close out of this I'm going to go ahead and bring up up a terminal and that's where we're going to install the net Maui workload so let me go ahead and zoom in a little bit here for us perfect so here I can now type in net version or net info for example and get information about the donet SDK that I have installed uh and if for some reason you don't see that command or it's not working close the terminal and reopen it uh after you install the donet SDK so here you can see that asp.net core and the donet uh SDK installed the next thing I'm going to do is actually do a workload list and this is a Nifty command that will show you any workloads that you have installed so I don't have any here uh so I haven't installed anything yet because it's a fresh machine so what we're going to want to do is uh for example do net workload install Maui and that's the command I'm going to run now here I need to elevate my permissions so I'm going to do say pseudo here and do a net workload install Maui so of course based on your machine and your setup you may need to give it uh some elevated permissions now at this point I'm going to install the Maui uh workload and this is going to install everything that I need as far as sdks and templates and things like that on my Mac machine so this does take a few uh seconds or minutes based on your speed to install so let's goad and let it go okay perfect so donet Maui workload install check check check we are good to go and I can now do donet workload list again and sure enough there is the Maui workload now the important part is that under the hood the Maui workload actually has additional workloads that it's installed for us we can actually run another command which is going to be net workload search and what that will do is it will show us all the available workloads that are out there so here we can see Maui Android desktop iOS things like that the Maui one includes all the platforms that I need so it'll have ma Catalyst iOS Android specifically here for this machine which is really really great uh so once we have that up and running what we're going to do now is show you that yeah you could actually create AET Maui project here if you wanted to you can sayet new here I'll say list for example and this will show me all of the templates and of course I have all of the ones that are built in if I scroll to the top I'll see that I have the Android and nowu we one's all ready to go so I can now do down a new but of course we want to install Visual Studio code to actually create the project template as well so I'm going to go over back into the browser and we're going to go to code. visual studio.com so this is the visual studio code website where I can download and install VSS code of course it tells me to download for Mac but it's available on Windows Linux and of course Mac as well so here I'm just going to go ahead and save again and then we'll go ahead and install vs code which is also a very quick installation here I'm just going to drag and drop onto my applications folder and then we can go ahead and launch vs code down here Perfect all right so once we have vs code installed we'll also have to install some extensions so yeah I've opened it from the internet so let's go ahead and open vs code and perfect all right let's make it a little bit bigger here and make it bigger and then we'll zoom in a little bit for us now there's a great getting started with vs code guide if you've never used vs code before uh but I'm just going to go ahead and say that I did it all cuz I totally did it all and I know 100% of how VSS code works just kidding all right so uh now that I have vs code installed you can go to a new terminal for example and you could run those sameet command so if you wanted to you could donet you know new you could donet build you could donet run you could do all those things that that we've done before in the terminal it's just an integrated terminal but what we're going to want to do is actually install some extensions for C and also net Maui so I'm going to go over into the extensions Gallery here and I'm just going to type in Maui or done in Maui or whatever you know you want to pick Maui should just come D in Maui but if you don't see it you want the doet Maui extension which is built on top of the C devkit here we can go to dependencies and see the C extensions there and the C devkit as well so it gives us everything that we need to get up and running inside of vs code which is awesome Okay cool so here we can take a look at the details but let's just go ahead and install it now as this is installing it's going to install those dependencies and you can take a look at the features you can also look at the change log as well and see how things are advancing and a new features or things like that also mention that there's a pre-release version if you want to flip to pre-release things are always being updated all the time with the c extensions and the donet Maui extensions as well so I also want to show you if you clear this out we'll see that not only did the non Maui extension get installed but also the C and C dev kit also got installed there as well so everything is up and running and of course make sure you always check for updates as things progress you can go down into the settings and then actually open the settings and under extensions you'll see the D Maui and the C devkit there there's some really nice things here like hot reload for zaml for example that's here we're going to come back to this uh setting a little bit later as we can see the Android STK and other things are configured but also take a look at the C devkit extension because there are things like hot reload that you might want to enable which would be Nifty 2 I have a whole shorten video on that as well so cool so now you know where to get to the different settings inside of VSS code but let's now go ahead and actually create a new project I can go to the Explorer and hit create new project and this will load the project templates for me automatically there we go and there's Don Maui it's right at the top I can go ahead and select that pick a folder where I would like to save it so let's create a new one I'm going to call it projects here and hit open so that's the destination picker I'm going to call it Maui app 1 and then create the new project all right so it's going to create everything that I need and we're going to see that it will open up a standard sort of project File Explorer on the left hand side but also we can see a lot of things are happening on the bottom like different analyzers are running we can also see the solution Explorer that's opened up for us with the c devkit so it's a great way of viewing it instead of the file explorer so we just want the solution Explorer so we can see the nesting and the different dependencies now one thing to note here is that we are going to see a bunch of Errors because we haven't installed any of xcode or Android sdks at all so that's what's next for us to do all right let's first handle the xcode and iOS setup here so I'm just going to first kind of close these and I'll show that in the output you might want to read this fully so we can actually see like hey the Java SDK is required here's how to do it uh here's the Android SDK that you may need and there's a bunch of other things inside of here as well now I will point out that there is some great walkthroughs to get started so for example there is this getting started with Donnet Maui it's going to show you how to connect to your account to the C devkit which I'm going to do here so let's go ahead and sign in perfect and now I'm all set and ready to go and then after that the guide will show you how to set up your environment set up your D Mai environment all the things that you may need so this actually just walks you through kind of what I showed you a little bit which is nice but it doesn't show you necessarily how to get set up with the different emulators and sdks and different requirements beyond that so I'm going to first go ahead and just pin vs code because we're definitely going to come back to it and then quit out so I mentioned we're going to inall xcode first which will give us all of our iOS sdks and also so our simulators as well now I want to point out here that on thein Maui installation documentation it shows us our minimum requirements and this release versions which is very important it shows us for each release what is compatible specifically here for Apple tools it's xcode 153 and 154 based on this specific service release ofet 8 this of course walks us through everything we need to know but it'll also show us any additional steps for iOS and Mac to get up and running and of course it's telling us that we need to install xcode which is required and run a few more commands and of course open xcode so there are a few ways to install xcode and one that's very popular is just to install it from the Mac App Store this is how I used to do it all the time and I used to just install was ever there for me the problem is that sometimes the versions of XC code that are in the App Store don't match with what's actually supported by D Maui at the time so so you may want to do it more manual and you can do that by going to the Apple developer portal and sign in and download specific versions of xcode so here we can see the stable release of 15.4 for example and you can download it directly from the Apple developer portal and there's other tools that you can install as well now this means that every time you want to install a new version or go back you're going to need to do that but there's a tool called xcodes that's open source that's really awesome that allows you to manage multiple versions of xcode on your machine I absolutely love it I've done a whole video on it but uh all you have to do is simply download the xcodes app put it into your application folder and launch it and sign in and you're good to go so here's xcodes I'm going to go ahead and open it up here and the first thing that we're going to see let me make it a little bit bigger of course if I zoom in here is that it shows me all of the different versions of xcode available to me including release candidates betas and older versions I can install any of them so this is what's really really nice about it is with one click I can see the platforms and the version of X code to install so we're going to install 154 right now now of course based on when you're watching this you want to make sure what's compatible and installed then so make sure that you match up your version of xcode which with what is supported now when you click and install this it's going to take quite a few minutes to be honest with you so I'm going to definitely fast forward through this and make it look like it's super duper crazy fast but it does take several minutes uh based on your internet speed this is going to unarchive it's going to do security validation and all this other stuff and then what we're also going to want to do is make it active so this runs a command that makes it active automatically for us and then we can install the different platforms like iOS that we're going to want to install now it is optional based on what you want to run so if you want to do like different types of development you can do those optionally but here I'm just going to do the iOS download and install which will give me all of my simulators and any of the additional sdks that are required for iOS development so again I'm going to speed this up so we can Skip by it perfect there we go awesome so now we have xcode and our iOS simulators up and running and it's set to active all right now what I'm going to do is I'm going to relaunch a new terminal so that's what I'm going to do here and again I'm going to make it a little bit bigger for us and we're going to run this command which is xcode Select D- install so this is going to install uh developer command line tools and actually when you run that they're actually like hidden behind this window for some reason it took me a little bit way too long to figure that out but there it is there's xcode select so we're going to install that as well uh as part of the requirement so we're going to accept that license agreement and we'll be ready to go and again this takes several minutes but I'm going to speed it up for us here Perfect all right now that we have xcode installed via xcodes the the iOS package installed now we are ready to get going we're going to want to go now into the applications and see that we have xcode 154 here now when you install it from the app store or manual it's just going to be called xcode so be aware that the pathing is going to be a little bit different that you may need to worry about later and then inside of xcodes it's going to show us the folder path directly for xcode so let's go ahead and launch it and then we want to launch it at least one time so we can Reg everything there might be additional uh terms and additions and things like that that we need to accept so let's just go ahead and see X code installed so just hit continue and you're kind of good to go and what's important is that you go to the settings you can check out what's installed uh if you want to so here for example you can look at your accounts that you can link you can look at different Navigation and key bindings and platforms you have installed so here we have mac which is built in and of course iOS 17.5 and you can see additional locations and command line tools all that stuff that you have so it's nice to be aware of that and additionally one uh window that I'm often going back and forth from uh beyond the platforms folder is actually window and then devices and simulators or even organizers good too but this is going to show us all of the different devices that are registered or simulators that I have and you can install more as well okay woo xcode done iOS ready to go next up is is that we need to get Android stuff installed so here again we're first going to install the Microsoft open jdk 17 this is going to be the jdk that is how the Android applications are built and you just need to pick what specific operating system and architecture you want so here I'm on Apple silicon I'm going to install the jdk 170 or again whatever is recommended inside of the documentation here is 17 I'm just going to install it really quick I did super duper quick and we're going to go ahead and install Perfect and in just a few seconds now we have the jdk up in running perfect cool now beyond that we're going to actually need to install the Android SDK and additional tooling and here we can see that there's several ways of doing this if we're on Windows Visual Studio could install for us but we probably just want vs code so there's a few ways of doing it uh Android Studio you can install uh you can also if you're on Linux use package manager to do it there's also this builtin Donnet new sort of install Android dependency thingy that's there too it's a magical build command where you can pass out a bunch of commands and it'll download stuff automatically for you uh this is Nifty although I don't know if it's my recommended my personal James recommended even though it says it's recommended in the documentation um it's nice that it exists if you don't want to install anything else but since we've already installed xcode let's just install Android Studio because that will enable us to manage our Android sdks our emulators and a lot more I'm going to install Android Studio here and at time of recording right now is studio uh koala uh up and running so again we're going to go ahead and save that and then we're just going to Simply uh install it h so we're installing lots of things right VSS code xcode and Android studio and all the stks and stuff that we need but that is multiplatform development so again all I'm going to do is drag and drop that into the applic a folder perfect and now we're going to go ahead and open up Android Studio for the first time once it's done extracting it okay let's go and uh eject that perfect why not and open it up from the finder there we go Android studio and open it up and again this will take a few seconds to open up and verify and of course says you download it from different places but you it'll be good to go all right cool once it's up and running we're going to want to get started uh here so up to you if you want to send or not send data let's just do it on my machine and then we can zoom in and we can go through the setup wizard so here you can do standard install or custom install you can see what it's doing if you want it's the Android SDK different API levels and the avd which is the Android virtual device manager uh and here I'm just going to say yeah let's just do the defaults and we'll install more later on but there's the SDK location now but I'm just going to do standard install and it's it's going to install a bunch of build tools and things that I need for me automatically now this is installing the Android platform 35 right now of time recording uh 34 is what is required so we're going to need to install some more stuff but let's just get this stuff installed so uh it'll all be ready for us when D Maui supports that and again you might be watching this and might be already supported so you might not need to do anything else so check the documentation along the way as you're watching this video to see what actual versions are required now inside Android Studio you can do more actions and then go to the SDK manager and then what this will do is it'll show us all of our different things that are required so again go here and we can see Android SDK 34 is what is required so here all I got to do is simply select the upside down cake which is Android 14 or API level 34 and select apply which will install it for us automatically perfect all right and there we go it's actually quite pretty quick install to be honest with you but based on your machine it's going to take a little bit more time uh to get that up and running so there we go perfect now beyond that I'm just going to select okay here if I do more actions again we can go down to the Android virtual device manager this will enable us to set up more Android emulators so it actually creates this pixel full device for us automatically but I'm going to say new and let's just do like a pixel I don't know 7 7 a something like that different sizes and just hit next here and then we can pick and choose different system images uh on this but I'll just use the pre-made one that seems fine it has Google Play apis on it and then we can give it additional settings if we want to all right cool now I'm just going to delete the old ones I don't have it laying around but I'm just going to Boop do that now the cool part is that Visual Studio code will be able to find these emulators and they all play Happy Together as well which is really nice and you could start it from here but Visual Studio code will do it for us automatically so let's hop back over to visual studio code let's see if we can get things up and running all right so inside of Visual Studio code I already had the project open because I created it previously so create it if you haven't yet uh but we're going to see that oh I was Oho close and I still get Android install bits are missing so we're going to investigate that but first let's look at the output and we can see that actually it found all of the xcode bits and pieces for us which is awesome but if we look up top we can see that the Android uh components Java was found it does say that Android platform 34 was there but not the build tools and not the command line tools we can also see there's some recommended options like the non Google play Android emulator system images and those are optional so that one's okay but let's hop back over to Android studio and understand what I missed so I'm going to go back into the SDK manager and I'm going to zoom zoom in here and see that yeah there's the SDK platforms but also the tools Now it only shows me the latest tool so I just need to select this show package details and I can see all of the other build tools so let's select 34 and hit apply this will now install the 34 build tools that are required at time of recording at least for Don and Maui now I also need to come up and I need to select this Android SDK command line tools and this can just be the latest that's okay I'm going to hit apply here and that's going to install that as well so those are two additional components and of course Visual Studio code and the Dy extension told me everything about that all right cool now the nice part here is that I can come up to the command pallet and I can do D Maui and we can see the here is configure Android and Apple to set different locations inside of here and I can pick the devices of course but let me go ah and do configure Android I can click on how to configure set the paths at the Java STK path but those were found so let's go ahead and tap on that refresh Android environment that's going to rescan and see if it can find everything that I just installed and sure enough everything was found for me automatically down in the bottom now of course I don't have that other system image and I could do that if I wanted to but it is good to go because I just need one Android emulator and uh it'll go and find it all right cool if I want to of course like it'll tell me exactly what I need to do but we'll be good to go all right so now at this point I'm ready to go uh if I come in we can see that I have all the dependencies set up for Android iOS and Mac I can see that inside the CSR for me automatically here and I can start to open up my files like my main page here in the zaml now all I need to do is run the application so I can actually go to this little curly brace and say build Target and here I can select my Mac machine emulators iOS simulators on here if I want to um and that will enable me to pick the deployment Target for this uh build I can also go up and say Don Maui and just like we saw earlier I can type in pick and I can do startup device or startup project so I'm going to select startup device and select my Mac and now all I need to do is go into run and debug and simply run and debug it this will compile up the Mac application and run it on my Mac machine so here we go and there it is now I'm actually on a pretty high res monitor you see be doing a lot of zooming but here you can see that I have the Mac application up and running which is awesome cool so now I can do normal debug stuff but let's go ahead and now run it on Android so I'm going to go into debug Target again select my Android emulator and hit run and debug again this time Visual Studio code will actually start my Android emulator for me automatically that's actually really really nice and if of course if I have a device plugged in it will also show me my devices as well down here we can see that this uh system little thingy pops up and that is my Android emulator which again will take a few seconds the very first time getting up and running and this is a fresh fresh fresh install so let's go ahead and get it built up and launched and ready to go all right our application is running here we go D Maui and we have the same exact application now running on my Android emulator awesome I can of course come in I can set break points I can look at the code behind all those things that I would be used to all right now the last thing to do is run this on an iOS simulator now I'm just going to go in and again I can select the different command if I do donet and pick startup device you can select your Simulator for iPad or I or iPhone here I like to just do the smallest one which is the SE device and then again just hit run into bug now because I'm inside of a c project it's actually asking me questions where it new automatically was am so that that's kind of interesting and you can see it saves my profile here I can also go and run this from the little run uh over here this little play button over here which is kind of nice and it'll actually allow me to run or debug the application Okay cool so the iOS simulator is up and running at this point or getting started to I should say it takes a few seconds to get up and running and at the same time it's also getting ready to deploy and debug my datet Maui application that we just saw running on Android so again this takes a few seconds but sure enough there's theet Maui application and now we're going to start to see call Stacks and threads and things up and running as the debugger starts and I can go ahead and hit click me and we are totally good to go on Mac Android and iOS all right there you have it full endtoend development environment setup of course I've done this here on Mac OS but if you're over on Linux like I kind of showed in the documentation you can just install Android Studio or the Android SDK and tools for your specific drro and then Visual Studio code will pick those up for Android development if you're over on Windows you can do the same you can install Android Studio all the things that I just showed you um and also the windows dependencies as well but honestly if you're over on Windows my recommendation just in my personal opinion is to install Visual Studio 2022 hit that little checkbox for Don Maui development and then install Visual Studio code and all of the Don Maui extensions I like to do that and let Visual Studio handle everything for me because it just gets everything up and running I could possibly want and then Visual Studio code will pick up all of those settings automatically that's my preferred route but it's up to you you can install Visual Studio code Standalone just like I showed you I'll put that link to that documentation that I talked about earlier now I hope that I answered all of your questions and then you followed along and you were setting up your development environment machine as well let me know how it went go down to the comments below and let me know if you have any additional questions chime in there as well I really hope that you enjoyed this video and of course if there's any other topics that you want let me know in the comments below and don't forget to subscribe so you get up to date every single time I put out a video here on the channel and finally I always like to recommend it hit that like button if you did enjoy this video helps others find this video and helps out this channel which I really appreciate all right that's going to do it for me thank you all so much for watching and have a good one [Music]