Instant .NET Developer Environment for APIs, Blazor, & More with GitHub Codespaces for FREE!

if you're looking to get up and running building donet applications in seconds with an instant Dev environment that's completely free then look no further because I'm going to break down everything that you need to know about code spaces and the newnet template that enables you to oneclick get a Blazer front end and a net API backend up and running so let's get into [Music] it hey everyone I'm James and today we are talking about GitHub code spaces that's right the instant Dev environment that enables you to build applications directly in the browser with a vs code like setup it's really really awesome and there's a brand new net template that enables you to one click get a Blazer front end with a donet API back end that's talking to each other it's really really neat if you never Ed code spaces before they run on this concept of like Dev containers which enable you to config figure a container if you will of what's required to run your application so that might be theet SDK for example and whatever the docker image is and any of the other SDK components that you need but inside that Dev container are other things including what extensions you might need for vs code for example including the new C devkit so with all this combined what's really neat is that you can spin up a virtual sort of Dev environment in the cloud inside of GitHub it gives you that instant Dev environment and this is neat because that sort of Dev container infrastructure is checked into your source code which is super duper cool and then Additionally you can take it a step further by connecting to your code space from Visual Studio code which is super bananas so let's go ahead and get into it okay so what you want to do is head over to github.com codespaces boom and this is where you're going to see a getting started here I don't have any code spaces it says what do you want to do what do you want to find there's a bunch of Quick Start templates here including the net one which is pretty rad uh but if you're looking to build react or gu start with jupyter notebook there's a bunch there you can click on templates and you'll see a bunch more so of course you have the net one you have xjs you have Express a flask one Django one you have all this goodness built in all you got to do if you want to start building applications withn net in a GitHub code space is Select use this template this is now going to scaffold and set up my entire code space in seconds it's going to give me this URL that's unique to me and now what it's going to do is open a remote connection and get everything scaffold up for me now this template isn't blank it actually has a back end and a front end now this entire environment it spins up and automatically pauses and Spins down automatically which is really really neat um and it takes just a few seconds to get spun up so here we go already we can see inside of our code space over here we have a few files including this Dev container file there we go and some icons a vs code folder and even a backend and frontend application right here let's go ahead and see what's in it so I'm just going to pull this down here and we can see oh this beautiful nice Remy GI of coespace loves net 8 it's net8 ified right away it shows you how to use everything the dev container here and even shows you how to get up and running with one click so that's really really nice and that's what we're going to see so cool so what's inside of here uh first and foremost is this Dev container Json this is what's going to give uh it the configuration so we can see theet 8 image here we can see some features that are enabled like Docker uh here GitHub CLI Powershell a we also see some customization so kind of the team put together everything that you need uh including GitHub actions co-pilot uh vs code C devkit uh C extension as well they forward some ports and and they even give you sort of some setup commands here um to runet restore when done and also um set up the environment and everything that you need and this one here is giving me four CPUs and 8 gigs of RAM which is cool we also get some just like General launch configurations for our back end and our front end which are nice so if you're used to vs code that'll give you that and also this using the C dev kit so you get the default solution and some tasks as well now here this is just the folders over here but I can actually go into the solution explore and pull that up top and that's that c devkit there that's actually going to show me the entire backend and frontend solution which is really neat so here we kind of get that visual studioes solution and multiproject support and here we can see that this is a standard uh net API using minimal apis with a single map get here of the weather forecast which is really neat of course I can do control space and I'm just going to increase my font size so let's say 24 and go back over ah it's beautiful it's ginormous I love it cool all right so this is going to return random data and if we look at the front end over here we have a Blazer application so this is using the server side Blazer mode this is configuring the weather forecast client this has a nice little URL over here for the Builder and it just does standard blery stuff we have a single page over here a fetch data so that will go and get the weather forecast and then down below it's going to go ahead and initialize and grab that weather can actually look at the data and there's the client over here which is going to pull that information from the Json which is nice and everything's dependency injected all right cool so now what we can do is we can go over to the run and debug menu and there is a run all option if I do a drop- down we can see that the configured for backend or front end uh but you can also do run all so I'm going to do run all and what this is going to do it's is going to compile up this Blazer front end and the back end as well so that's really really neat it's going to run these automatically both of the projects so here we're going to see that there's applications running in this port I'm going to say open in browser and then here I'm also going to allow this to always open up for me so I can just automatically launch it and refresh this here now this should be my backend so if I go to slash Swagger over here we should see my Swagger front end which is pretty cool and uh we can see that we have the get weather I can try it out hit execute if I go into my back end over here let me just go ahead and open that up and I just put a break point into this map I can go ahead and hit execute again it's going to hit that break point which is super cool just debugging don't have anything on my M machine installed just in the browser over here it's going to return that back now that launched the back end uh but we also have the front end and as well if I come over here to Ports we're going to see all the ports that were automatically open for me and they're forwarded so you can see I have like this friendly garbanzo blah blah blah port 8080 that's the forwarded Port from Local Host that gives me this public URL I can also come down here to the weather front end and click on the open and browser now this is going to open up the Blazer uh application but we can see actually in the tab that there's a little red dot because this is a break point so here let's make sure that we hit the break points and sure enough we have our weather forecast cuz our back end and our front end are running here so here we go just literally in seconds I created this templates optimiz this up and running I have everything that I want which is really really cool I can come back in I can stop debugging on my back end and my front end and I'm totally good to go now when I come back over here we can see that if I refresh this I have this created from a template and I have this over here I have everything going going on now what's really neat is if I go into vs code over here if I have the GitHub code spaces extension installed I can actually click on this little remote and say connect to codespace since I'm logged in with GitHub it's going to show me my code space that's running right here I'm going to go ahead and tap on it this is going to kind of refresh and reload vs code uh and what is going to do is connect to that remote environment here I can see that I have the a Dev container like we would expect and I have all of my different files and everything like that there but we can also see that the solution explor is there and we see that I have all the extensions and things like that that are getting up and running and installed and all that goodness inside here in the code space so you can kind of mash those two things together now what's really neat is you can still run and debug so here I'm just in vs code running debugging uh over here this is going to forward ports accordingly back to my machine so here we have all of our ports everything happening and then this is going to launch in the browser the website that's up and running there which is super cool and it also ran the Swagger which is also here running the same forecast as well the same application running inside of vs code inside of the code space all right there is so much more that you can do with GitHub code spaces right I showed you here with the new templates one click get up and running building a donet back end and a front end you have the full capabilities basically in the code space doing all your c.net goodness which is really really rad you can then of course bring it down locally now I could then of course just have this on GitHub right it's going to be there I could then pull it down and do local development instead of vs code or Visual Studio 2022 or whatever IDE you want to use so it's super easy to get up and running you can use code spaces completely free get it all up and running running inside of GitHub and just start coding right away which I love I've actually been adding code spaces to a lot of new uh things that I've been working on and the team's building a whole bunch of cold new Microsoft learn modules using codes spaces too just really easy to get everyone up in and going and learning if you've tried code spaces at all let me know your favorite feature I've just been really dabbling with in them in this last six or seven months or so I've been really enjoying them and creating Dev containers to really maximize my efficiency when I'm going between machines all right that's going to do it for this video I hope that you enjoyed it something a little bit different than I normally do but this thing just came out it's super cool and I love how it works so seamlessly with all the new C devkit stuff if you like this video give it a thumbs up and don't forget to jam that subscribe button and also ring that notification Bell so you get up to date every single time a new video drops here on my channel thanks for watching I really appreciate it have a good [Music] one [Music] o

Channel: James Montemagno

Views: 13,220

Keywords: github codespaces, codespaces for .net, devcontainers, vs code, visual studio code, codespaces, code spaces, .net code spaces, blazor codespace, asp.net core codespace, vs code codespace, dotnet, .net

Id: bJ8vfsqr4h0

Length: 11min 9sec (669 seconds)

Published: Tue Oct 24 2023