One Blazor Template to Rule Them All in .NET 8

what's up.net developers do you love asp.net core Blazer but sometimes you have a hard time deciding whether you want to build a new app in server-side Blazer or Blazer webassembly well in this video we're going to go over a new project template the project template for Blazer that's coming out.net8 right here on learn c-sharp and Dot net with Isaac hey folks Isaac Levin here with another edition of what's new in.net and c-sharp where we're going to be going over all of the cool things that are coming out in c-sharp 12 and Dot net 8 all the way up to.net conf which comes out in November of 2023 and if you're liking the sort of content you know be sure to like this video subscribe to my channel comment down below about what are some of the cool things that you're excited about coming on donating c-sharp and well as you know sharing along with your friends they can do the same one of the things that I'm really excited about with you know the newest iteration of c-sharp and net is some of the enhancements that are coming to Blazer I I've been a Blazer developer since it was first announced because I love that ability to build c-sharp applications that kind of run in the browser and do sort of cool things and we've done a few videos around Blazer specifically around server-side rendering and stream rendering so if you haven't seen those be sure to click the link up top and take a look at them and let me know what you think about them but if we've been building before you know in the in if we're playing around the pre views have done at 8 or even more building apps in.net 7 or net six we do have to make a decision immediately when we're building Blazer apps we want to take advantage of the Blazer server style of building apps which uses websockets to get that rich client interactive experience or do we use Blazer webassembly which takes advantage of the wasm runtime to run RC sharp in our.net applications in the browser and there have been to this point two different templates for that there's a Blazer server template and a laser wasm template and now in the in the latest preview preview 5 specifically of.net8 there is a unified laser web app template which takes advantage and coalesces all of the great things that you can do with server-side rendering which is coming on done at a server Blazer Blazer server as well as Blazer webassembly and I'd love to show what this new Temple looks like and how we can get started using it so let's actually go over to my screen really quick I'm right here I'm in a console app I'm in the command line and I'm just in a temp directory and before I started this video I installed the latest version of the.net runtime so if you take a look at net info and I go here zoom in as you can see here I have preview five of the.net 8 runtime so that's what you need to get access to this new preview arch of this new template so what I want to be able to do is I want to create a.net a noon.net project which takes advantage of that new template and that new template is just called Blazer so in the past with you Blazer webassembly or Blazer wasm or Blazer server but now we just have a Blazer ones and then we can specify an output let's just call this new blazer and this is what this is going to do is it's going to create an instance of that new blazer web app template and from here we can actually go into visual studio so let's actually pop up in Visual Studio go file open project and it can go into our new blazer and do that so before we actually go through some of the changes that have been made or the the what the experience with using this new template let's take a look at that you know if we want to get access to this template from visual studio so we can go right click to our solution Explorer add new project and if I search for Blazer here and our templates you see that there's a new blazer web app template and if I click next I can specify the project in the location as well as pick what framework I want to use but in this particular case because this template is new to.net8 we only have.net 8 as a option in the drop down so let's close out of this so let's actually take a look at what the new template for this new unified Village temp looks like so it's still using the web SDK of.net and it's using.net8 and nothing really crazy in this particular project so if we go to program.cs if you remember when we did our server-side rendering video we talked about a couple of things that you need to add to your applications to get it to take advantage of the server-side running capabilities in Blazer most notably the add ratio components extension to service collection so that register Services required for server-side rendering of Razor components and then also you needed to specify map razor components and then pass in a ratio component into it and you notice that it's app and if we if you've been developing apps in Blazer or you're familiar with the app ratio component it's kind of the the catch-all component that kind of starts off all of the the routing and the particular things that we need and this is great because if we take a look at app for instance you'll notice that there the the router is still there and the found and not found and what's cool about this now is that this is actually plugged in to endpoint routing so it handles both server and client-side routing so this is really really valuable because we can just plug in the router and it's going to do all the things that we're expecting to do there are a couple of things that are additional to our app.razer if um you're familiar with this in the past we still have that like I mentioned but then we also have the HTML head and then we have this script tag because you remember when we needed to add server-side rendering capabilities to raise your components we had to add the fully qualified um HTML um these the fully quality of HTML file to be able to server-side render those particular region components so you know that's really really cool we take a look at Main layout main layout it looks the exact same and then it goes to nav menu and that's the exact same as well and this is all really really exciting because if you look at appraiser you know it's that by default it's not set up for client routing but in the future there's going to be enhanced navigation that gets act that gets us access to that client routing the client-side Ryan that we're familiar with um and one thing that you might have noticed as well if we take a look at our Pages section we only have two components now we used to have three we used to have index we used to have um show data and we used to have counter before we actually take a look at and talk about why that's the case let's actually just run this project and see what this project looks like and how the experience is when we're running it so let's do that it's going to kick off a build and it's going to run our application and then I move this over from a different window and then I'm going to open up that let's go to our networking tab so if I refresh this page as you can see here which is it's a little bit so as you can see here there's no websockets being loaded there's no Blazer web there's no wasn't runtime being loaded it's just the blazerweb.js which wires up that server-side rendering and then our actual document and then if we look at our fetch data same experience right remember what we did in a previous video where we talked about stream rendering to make this uh work so if you look at if you click away and click fetch data you know there's a loading and then it populates right because we're using stream rendering so let's actually take a look at what that looks like so if you go to our show data adding that streaming stream rendering attribute and then we're just simple simulating retraining that data asynchronously so that's using a task.delay and if we look at our index.razer component this is just a simple component that's going to be server side render but both of these components are actually server side rendered ones using stream rendering to get that data across the way that we want it so let's do this let's go through the process of adding a new component that uses that client interactive experience that I talked about like that counter component so let's click that so let's uh click in our Pages add new razor component and let's just call this counter ah Razer and then I'm going to take the code from the previous template so this is some code from that previous template of the of counter and then let's just wire this up to our router so in our nav menu add that so now this is looking really really close to what the previous template looked like right so we have a counter that you know takes advantage of a non-click event which fires increment account but there's one additional thing that we need to do to add um this server-side Blazer Blazer server capabilities to the server-side render uh Blazer application and that's if we go into our program.cs if we take a look at adverse components in the iservice collection we have another extension for add server components and if we take a look at what that is it adds services to support rendering interactive server components in a razor component application so that's what we need to add for that and then there's one additional thing that we'll need to add back to our counter and that is to add a particular attribute for render mode server and in the future um we're going to have a fully complete like wasm server mode as well which is really going to be exciting so wasm Serum is already wired up but our render mode assembly I think is what it technically is called not not renderwise and it's render mode webassembly to get you know full Blazer webassembly experience but right now that's not quite there yet but if we wanted to for instance like get access to this without having to do some of these things we could take advantage of um a for an argument that we pass in to the command line so if we dot net new blazer webassembly and then use server so use server that so that's going to create a Blazer server that is already set up with an interactive counter experience right this isn't available in Visual Studio yet but it will be in the future right so if I was to click new here um and let's just actually do that so let's actually just call this laser new blazer one because naming is fun and then we'll go a new blazer one and then let's just open this up in vs code and then let's move this over here so if we open this up and we look at our Pages there's also there's a counter here and then we have render mode server and then we look here we're using the ad server components right so this just shows you that you can from the command line you can get access to that counter experience but I wanted to show what it would look like if we edit it manually right but you have access to it right immediately if you use that use server or argument as a part of the.net new blazer CLR all right so I think what's really really exciting about this is that you know it's bringing more and more good experiences to Blazer and that's awesome because I think Blazer is the the best way today to build data applications for the web and I'm really looking forward to seeing more and more enhancements coming out all the way up to.net comp and if you are too be sure to comment down below and let me know what you think I'm excited to see what some of the cool things you're building so that's it for this video take care

Channel: Isaac Levin

Views: 9,575

Keywords:

Id: 8ozjA26G8kQ

Length: 11min 25sec (685 seconds)

Published: Wed Jun 21 2023