Setup Your .NET MAUI Dev Environment - .NET MAUI Tutorial Step-By-Step

in the second episode of the dot at maui crash course we're going to learn how to set up our dev environment so we can actually develop apps with dot at maui [Music] you heard that right this is part 2 in a crash course about building your first dot at maui app so feel free to review this video on its own if you just want to know how to set up your dev environment but this crash course works best if you work through it from start to finish so you should see the video pop up in the corner of your screen or find the full playlist down below so you catch all of this crash course and you don't miss a thing now let's move on to the thing of today how to set up your dev environment for don and maui now at the time of recording this we have just released two release candidates of don and maui the first release candidate of visual studio for mac is out as well but visual studio for mac the tooling for don and maui isn't really there yet you can do some of the things but the best experience right now is still on visual studio 2022 for windows so i formatted my surface book just for this video so i hope i get it right in one take because else it will be a lengthy process i didn't remove the xamarin stickers yet but i i reimaged this so that i can install the latest visual studio 2022 and take you through the whole process um now that's where i wanted to why i wanted to mention this you will see visual studio 2022 preview at the time of recording but maybe it's ga by the time that you are seeing this so then you should just be able to install visual studio the stable version and it will have the don and maui bits as well i will mention that somewhere throughout the video as well so don't worry about that but we're gonna do this whole thing on windows but you will still be able to build it on a mac if that's what you want but i'm not going to set up the whole visual studio thing on a mac right now because that's just you know it's still in development so it's still not really ready yet i'm going to show you this whole thing on windows that's probably where the most people are going to be anyway so let's actually just dive in and see how it's done so i jumped into my surface book 2 and i opened edge and went to visualstudio.microsoft.com here is where you get every visual studio that you will ever need and if you scroll down here a little bit then you can see all the flavors of visual studio visual studio visual studio for mac visual studio code and on the left here we're on windows so we want to go to download visual studio you can download the community professional enterprise whichever one you need the community is the free one and you can totally do everything that i'm showing today with the free community version actually i'm not going to download this one so if you're watching this kind of after may 2022 then don and maui should be ga so it should be available in the stable version of visual studio right now we're living in a preview world with release candidates so i'm going to go to visualstudio.com visualstudio.microsoft.com preview and that brings you to like the preview version so if you want to check out the latest and greatest for dot and maui that's gonna stay even after may 2022 um you can download the preview version and you will always have the newest stuff so i'm going to download the preview version right here it's going to scroll me all the way down you can again see community professional enterprise i'm just going to go with the community one just to show you that with the free version you can do everything that you need it's going to go to my downloads let's open that and then it's going to do the installer so do you allow to make this app changes to your device yes definitely um and then it's going to bring up the installer so before we do i'm going to accept the license agreement and it's going to i kind of like update the installer as well get some things in place and with the installer well actually with visual studio what the really cool thing is you can install version side by side so if you still need visual studio 2019 2022 maybe 2023 i don't know how the version is going gonna go after here but you can put all these versions next to each other even different versions of visual studio 2022 i think so you can definitely do that now what you will need here um you can see it is desktop and mobile it still has the little xamarin icon by the time that you're watching this and this is stable that will probably have gone away but it has the little xamarin icon right now but it's already called mobiledevelopmentwith.net and whenever we click that watch out here on the right side make sure that dot at maui is clicked as well and that is everything that we need to install um it is well everything we need it's going to bring in 15 gigabytes so you know that's quite the uh the workload but you know just install that click the install button and i'm not gonna bore you with the whole process here it's gonna download all these kind of things it's gonna install all these things i'm gonna let this run i'll do a little cut here in the video and i'll see you on the other side whenever i have visual studio running so we fast forwarded in time a little bit and um i now have a visual studio sign in dialogue i'm not going to do it right now um but you can totally sign in here with your microsoft account it allows you to sync settings do all these kinds of things um which is really amazing but i don't need it right now so let me just do that another time choose my default scheme well i'm not really a dark themed person so let's just do the blue one and click next so it's going to prepare it's for first use and by clicking the mobile workload and down at maui workload it should have pulled in all the things that we need to get started with done in maui development so let's have a look here at create a new actually let me get out all these distractions right here alright so let's start here by creating a new project and we got all the templates here you can do console apps you can do all kinds of things but of course we're interested in that maui app so you can see here there is three templates one for like your regular.net maui app template uh which is creating a regular.maui app you can use c-sharp or example to create your ui and that will translate into the platform elements that it looks and feels as if it belongs on that platform right now we also have the other thing which is a don at maui blazer app so blazer is a application form that you can use a project that you can use to create single page applications on the web but just with csharp.net so you don't need any javascript there which is really cool really cool technology and you can do a lot with that but now you can also incorporate that in your done value app or winforms or wpf i'm thinking about creating a course for a dot and maui blazer app as well combining these two wonderful technologies if that's something that you're interested about let me know down in the comments so i can work on that next now the last one is a done in raw class library which is a dll that will you know allow you to reuse and maintain your code a little bit better and do all those kinds of things but what we're after right now is a dot maui app just a regular one now a quick note it says preview behind my templates right here again if you're watching this sometime in the future the preview labels might have gone away because um it's not in preview anymore so um don't worry about those little kind of differences um let's click next then we have to specify a nice project name maui app one is fine for me the location solution name make sure all those things are correct for you and click the create button then visual studio is going to think a little bit it's going to generate this template for us with the right names and the right namespaces and all these kinds of things so it should come up with this interface with our project and that will ultimately lead us to our done and maui app so how exciting is that um here it opens with like the main page so you can see the example right here it's loading some things on the background and you know this is it on the right we can see our maui app project uh structure i'm not gonna walk you through that right now that is for another video uh we're just here to set up the environment um so basically let's just see if this actually works so here at the top we have this run menu and it's a little bit different than the run menu that you might be used to from other net projects because if we click here on the little arrow you can see all these different things we can see the android emulator the windows machine ios devices local devices simulators so you know and the framework so the framework is kind of like the framework that you want to target but typically you don't need to touch the framework one just select whatever device you want to run on and it should just figure out the framework for you automatically if it doesn't seem okay then click one of those but um so you can also plug in like your physical android device right here that should work just as fine but let's see actually what we're doing so if we select one of these here let's stick with the android emulator and click the run button it's going to bring up the android device manager apparently for some reason and the android device manager allows you to set up emulators for android and seeing that it's the first thing visual studio is going to suggest us like hey create this default android device and this is recommended for new developers so how cool is that this is awesome you can see it comes with a pixel 5 android 11 which is pretty new uh size six inches um create okay fine it's going to create that thing for us uh it's going to download the image if it hasn't done so already it's going to set it up and whenever it's done you can see that you can start it and you can do all the things so that's pretty amazing to be very honest it could be that some other sdk needs to go in here as well you need to accept some license agreements um so but you know this is this is typically how you set up your first emulator visual studio will guide you through the process here but don't worry if there are some other dialogues here popping up that you have to accept or continue or or whatnot now there is a lot to do about the android emulators especially if you're running on windows so i will link down to the docs down below in the video description because it can be a little bit of a hassle to set it up that it also works like performance that it runs smooth that it runs fast which has all to do with like hyper-v and all the virtualization stuff that you might have and that depends on like if you're running on an intel if you're running on an amd cpu and all these kinds of other things if you run this thing on a virtual machine which you totally can i would recommend you to use a physical android device because running a virtual machine which is an emulator basically inside of a virtual machine then you're going to have a bad time that's not something that i would recommend so you know whenever you can run it on a physical device and look up in the documentation i think the most obvious route is to just enable the hyper-v services on your windows machine i'll show you that in a minute and then the performance should be pretty good so let's switch back to visual studio and see how to actually set that up so here we are back in visual studio and whenever i click the start button this will start your emulator actually before i do like i said this visual studio suggested us this first emulator right which is great which will work for the most scenarios but you can totally set up a new one for different scenarios here on the left you can select a base device you can select the processor that the device should have the os so whenever you want to test things on different android versions you totally can you can give this all kinds of properties what kind of sensor should it have what kind of resolution should it have all the things that a device can't have or shouldn't have ordered up you can configure that here so everything here for your needs but i'm going to stick with the default emulator right now and whenever i click start it's going to mention that thing that i just said like hey turn on the hyper-v feature now this is the documentation page so you can also do this get to the documentation page or find the link down in the video description below let me just open it really quickly and you can see like hey there is a scenario i have intel i have amd i have support hyper-v i have nested virtualization so there's all these kinds of things please read through this what is applicable to you try some different things but we want to enable this hyper-v acceleration right so we just want to do that and there's two things that we need to do hyper-v hyper-v platform and here this windows hypervisor platform so actually let me just do that go here to my start menu settings and i'm just gonna type here at remove programs but i don't think that's the right one because i want to specify the windows features i always get confused here so let's search for windows features ah turn windows features on or off that's the one that we are looking for so then we have here hyper-v and we want to select the hyper-v platform so i think this is all that we needed and scroll up a little bit down here we also have the windows hypervisor platform make sure to check that one as well i think if we do then it's going to click ok it's going to install some things and i think we need to then reboot our machine so i'm going to let this run a little bit in the background and then i'm going to reboot make a little cut in the video here we go reboot your machine not going to do that right now but i'll do that afterwards and then we pick up where we left off but for now another interesting thing that we can do is switch over to running this on windows so i'm going to leave android behind for now and i'm going to switch here in the run menu to my windows machine because that's the power of maui right i can just say hey i want to run this code base now boom on windows boom on ios boom on android that's how we do things around here so let's do this on windows and i think this is not going to work as well it's actually going to build things it's going to maybe try and deploy but then it's going to give me an error or hopefully a more suggested suggestive message what we can do about it and the good news is i already know what it is actually it pops up the right screen for me so that's even more amazing it brings me back to the settings app in windows 11 because windows 11 maybe also windows 10 already i'm not entirely sure windows 11 has this developer mode that we need to enable to be able to run these applications and luckily it's very easy to do we just say click boom on and confirm that we actually want to do this developer mode yes and now we're ready to go there is some other nice stuff to explore here so for instance this file explorer one these are settings that are already inside of windows but as a developer you typically want these settings on i want to see the file extensions i want to see the hidden files i want to do all these things so you know play a little bit with the settings here but the most important one is here developer mode at the top enable that one and we should be good to go so it says deployment errors continue no i enabled the developer mode now so let's click this windows machine again and it's going to restart the whole process it's going to build it's actually going to deploy the application deploy succeeded and we should be able to congratulate each other because now we have built our first dotnet maui app which should appear on screen right now yes awesome so this is the default template it has this little dot netbot um a simple hello world and i could do this click me and do the current count here so we've built our first dot at maui app which is now running on windows isn't that an amazing feeling i love it um so this is done um android is mostly done we just need to reboot the machine that leaves us with only ios right ios and mac os let me tell you a little bit about that first so for ios and mac os the story is a little bit different because you cannot build that on a windows machine i already mentioned that in the first video you just can't um so there is a couple of options but the most obvious one is to actually get a mac and put that somewhere in your network so you don't even have to see it you don't have to it has to be running it has to have a power cable it has to have a network cable preferably and just put it somewhere in your network right so you don't really have to see it it can be a mac mini it can be anything that runs the kind of like latest ish mac os that performs a little bit nicely and what's going to happen is that you're going to connect through visual studio to that mac i'm going to show you in a minute how to set your mac up and then your visual studio can connect to that and then you don't really have to do anything you have to install xcode on your mac but other than that visual studio will take care of the prerequisites it will install like the host agent for you it will install all the bits for done at maui and then what will happen is whenever you click like hey i want to run this on visual studio um but now for the ios side it will build all the things through your mac build host bring that back to visual studio and you can even kind of like run it through there with the remote simulator for ios and do all these kinds of things um or you can you know just build it there and then remote desktop into your mac and use the simulator there so there is like a couple of options there um the one thing that you can't really do at least for now uh for mac os you can't really use this scenario if you want to build apps for mac os then you really have to go to visual studio on mac on your mac um but you have that lying around already then right so that's perfect but that's kind of like the scenarios and the things that you can think of here so with that let's switch over back to visual studio and let's see how to set that up so um first we're gonna go to this little thing right here this is the little monitor you can also go to um actually okay so this is the windows defender firewall um if you have a different firewall it might come up as well because it's now going to communicate through your network to see if there's actual macs here right so allow access to that it already picked up on my macbook here but you can also get here through tools ios and then say pair to mac and whenever you're really doing this for the first time there will be the the little wizard that i just clicked away you can do add new mac you can use the name or the ip address if that's what you want but as you can see it already picked up on my macbook that is already on the network here as well now let's switch over first to the mac and see how we're going to set up that we can actually you know receive these connections because we actually need to do something on the mac side for this as well so let's switch over to that come back here and see how it all works from there so on our mac let's configure how to connect to this mac to turn it into a build host um here we're going to go to this little mac os menu we're going to go to system preferences and inside of our system preferences we're going to go to sharing now unlike my service book i didn't like re-image reformat my whole macbook because that's like my main machine so i'm definitely not going to do that so i i set this up on beforehand so you might already that's also why you probably saw my mac already in the list in visual studio right so i already got that set up but whenever you come here first then you probably need to check this remote login thing here first it's probably not checked by default so check that one it says remote login on i set allow full disk access for remote users that's probably needed for what we're trying to do as well and then you can select like allow access for all users or only these users so you can also create a separate user that you want to connect to for your mac build agent basically um and in this case like only these users so that's me um the the people that are in the administrators group those are the only people that can connect and this is basically all that you need to do so set up that sharing a couple of check boxes and you should be good to go of course you need to know your username and your password as well that's the things that we're going to need to actually connect to our mac we'll see that whenever we go back to visual studio this is also available in the microsoft docs so i'll post a link in the video description of that as well if you need some little more information or guidance on this but in the ideal situation this should be how to set it up on your mac all right with our mac set up we can just come back here and i can now double click this machine it's going to check the ssh connection i'm going to have to enter my username and password here so that's the username and password that we just you know for the the account that we just opened up through like the mac settings right and i'm going to click log in and whenever i do it's going to create an ssh connection it's going to start the connection to my macbook it's going to check what is already there what still needs to be installed and it's going to download and install all these things i think it can do it in the background so i can just click this away we just have to wait for it until it's set up and we can hear in the toolbar you can now see if you look really closely which is maybe a little bit small small on the screen here you can see that it has a little plug there now and whenever everything is set up correctly it will show up green here and then you will know that the connection is perfectly set up and you can actually use it now and whenever that happens you can also see that it says validating now whenever that happens here in the run menu you can also see like the ios simulators you will get a list of all the simulators that are there so you can run that on a specific one so you can do all these things um right here like so but i'm not going to really show you uh all these things on ios i'm going to focus on android and and windows so that i don't have to switch around between all these things right now um of course whenever visual studio for mac 2022 has proper done at maui support then you can just go onto your mac as well and do all the ios and mac os things from there and the android one and then you know for windows you really have to be on windows and that's like kind of the scenarios and all the things that you need to do here now let me actually just quickly reboot this machine get back here so that we can also see how this runs on android okay so i rebooted the the surface book um you can see by the way i load up visual studio 2022 i loaded up the project that we just created and you can see um here at the bottom and here at the top that it's connecting automatically to the macbook that we just set up as well so you can see it's connected now it does that automatically once you have connected it once and then you can also see here in the run menu that i just saw like hey ios simulators boom we got this whole list of all the simulators that you can select and now run on so that's pretty epic but i promised you to show it on android so let me go over here to our android emulators and the one that we just set up is here as well and whenever we switch to that and we click run it's going to now build the thing at the same time it's going to start the emulator we should see that come up right now it doesn't didn't give us the warning anymore that it's going to be slow because we need to enable hyper-v because that's what we did right so we enabled hyper-v um you can see this android emulator coming up there's this little bar here on the side that has like the the back button and the the home button and then all kinds of things you can open up the camera so kind of like the the buttons that you typically would find on a regular android um device right so that's now booting up it's coming up with google gives us a little animation at the same time visual studio is still building our application and whenever those two things are done then it's going to deploy the application onto android and we have the exact same code base now also running on android so that's really really cool um this is probably going to be what i'm going to show you throughout the most of this course um we'll be showing you on android and on windows just because it's easiest from windows to switch between these two for ios it's a little bit more of a hassle but you can definitely do all those platforms from one code base with don and maui so that is really amazing did i say that it is amazing did i say it too often i probably did didn't i but i'm just so excited to get you going with this and you can see all this power and leverage all these good things for yourself so while i was talking this pixel is starting so the device is actually coming up and while it does i hope that the build in the background also kind of like is done and it deployed it to the emulator and it's going to come up here at some moment as well actually it might have waited until the emulator was done that kind of like makes sense right that it actually does that so that you um you know that we're not deploying things to an emulator that's not there um you can see this is a really functional android device right so that's that's really cool as well you can see it gives me like the the first time experience wiggly thing like hey you can scroll up here and you can get all the apps through here it's still like you know booting up a little bit so it's a little bit sluggish even though we we enabled all the hyper-v stuff it's you know it can still be a little bit laggy sometimes because there's a lot going on here the android devices are really powerful these days too right so but you can see it it has all the things you can go to google you can do the camera so the camera is interesting right you can use all these sensors but the camera is also emulated um i think you can connect it to an actual device an actual camera that you might have connected to your machine as well so that you have an actual camera but they also have a way of kind of like emulating a camera device and then you will see something through it and allow to take a picture and that kind of stuff so this is really amazing for actually testing things um and if we do the little three dots here just to go through talking here while this is actually running and doing all the things with this emulator of course you need to test all these kinds of things that you might want to have in your application right so here you can also bring up the settings i just click this three dots here and you can do all these things you can set a location we can simulate the gps signal um you can define routes here so that you're actually like walking or driving or doing all kinds of things with the routes um we can have different displays we can add a secondary display of that what you want we can kind of like influence the cellular behavior here so with a network type like how strong is our signal how does our app behave if our mobile internet is not really that great you can do all these kinds of things here with the emulator now while i was talking it actually deployed the app you can see it here our maui app it's coming up on the android emulator so um it should be booting up any minute now um especially for a first build it could do take a little bit of time before it actually you know builds all the things start your emulator deploy it but um you know incremental builds should be much much faster and also this is kind of like our initial setup right so um give it a little bit of time also this is where like the net hot reload and example hot reload come in right so whenever we have this running now we can just make changes inside of our example inside of our code and apply that to our running application so we don't have to restart our debug cycle so that is really cool right um here we are the net maui boot screen is coming up like the splash screen so we have that here and we have the exact same application it's scaled a little bit different but the click me thing um still works now while we're here so we have this emulator there also is now the example live preview so you can see that uh here which kind of like reflects the screen that you might be seeing like on the emulator right so we can't really interact with it maybe that is still coming who knows but you can at least kind of like pin this here and you don't have to go back and forth between like the emulator screen and visual studio all the time um so what we can do right now is see that example hot reload so whenever i say here background color and i say that is red and i save that then boom you will see that the button becomes red right so you can just go over the changes in at least your ui like this and with done hot reload enabled you can do that as well and with that you know you don't have to switch around between like the emulator and visual studio all the time so that is like kind of like how we're going to develop in this course now you know how to set up windows ios and android and all the things basically we are now ready to actually start our donet maui app development okay so in this video we have seen how to set up your windows environment which was probably the easiest by just flicking a switch and saying hey developer mode is now on boom we can deploy to windows we set up our android environment where we install our first android emulator we enable hyper-v on windows to make it run a little bit faster and uh we saw the actual first donut bar we have running on android and we've learned how to set up like our ios environment um but i will leave you to explore that for yourself and play with that a little bit now there is a lot to take in here especially like like i said at the beginning like you know this is somewhat of a polish demo uh where everything in the end starts working it might be different for you because there is so many different setups so many different parameters or variables that might influence all of this maybe you have visual studio already set up all these kinds of things so whenever you run into something just being with google to find the right solution for you there's a couple of documentation links down in the video description below that might help you with things that i typically see happening to people so make sure to do it there also put something in the comments if you can figure something out or if you did figure something out and you want to help other people with that put it in the comments i'll be sure to well i'll do my best to look at each and every one of them and help out where i can but at least you know we're a little community here so put everything that you find in the comments and other people can benefit from that so um thank you so much for watching again one of my videos please click the like button if you've actually liked this video and of course we're just going to go on to the next part of this course so click this button if you want to check out the full playlist and maybe you want to skip some parts please don't do that you have to follow it from start to finish click here for the next video in this course and go check that out and click here if you haven't subscribed yet please do [Music]

Channel: Gerald Versluis

Views: 24,754

Keywords: .net maui, dotnet maui, .net 6, .net 6 maui, dotnet maui tutorial, .net 6 xamarin, dotnet maui getting started, .NET MAUI crash course, .NET MAUI workshop, dotnet maui workshop, dotnet maui full course, .net maui full course, learn .net maui, learn dotnet maui, net maui, crash course, .net maui tutorial, c# maui, .net maui essentials, what is .net maui, VS2022, Visual Studio 2022, android emulator for pc, dotnet 6, visual studio, Windows 11

Id: nxdApcTMjz8

Length: 29min 9sec (1749 seconds)

Published: Wed May 11 2022