How to Add Blazor WebAssembly to a .NET 8 Blazor Web App 🔥

hello there I am Patrick and I am creating.net and Blazer tutorials here on my channel if you don't know me yet today it's about Blazer wrap assembly but with.net H yes it is different now so when you create a Blazer project with.net8 you might just want to use the new blazer web app template of Visual Studio but when you're using that out of the box you are actually only using Blazer server or server-side rendering actually and you can then use interactivity with laser server you can add streamed rendering well at least for now with a.net8 preview 7 there will be changes coming when you create a Blazer project and using the template then you will also have the well Microsoft promise to add the check mark to also add webassembly out of the box but for now you would have to add webassembly Blazer webassembly manually if you want to or you use the CLI okay that's also another the option but anyways I want to show you today in this tutorial how do you add Blazer web assembly to an existing Blazer web app with.net8 I know it's all new stuff so let's just have a look first maybe a quick word about what is actually planned with.net8 and Blazer there is this beautiful thread here by Steve Sanderson or started by Steve Sanderson the legend himself and he's telling us that regarding webassembly they are actually three approaches that they are thinking of how to include it into the new Blazer really it is really the new blazer because when you're starting Visual Studio what you will see in a minute and then you want to create a Blazer application then there's actually only one template left to rule them all so here you see approach a would be a single project with both Blazer server and webassembly and we excluded webassembly by default with a client shared folder here right and the other option please you can read it yourself of course if you want to just wanted to tell you that real quick and if you want to dive right into the implementation then just check out the time codes and there you can of course skip to the implementation there next approach would be single project approach B single project include by default and that would mean that you would have a program clients he has in the program server CS so this is at least the idea behind it but in another date the solution we get are two projects meaning that we will have the default project where everything is actually Blazer server you can add interactivity there you can use stream rendering there but if you want to use components rendered with the new render mode webassembly then you would create a new client project and this is exactly what we're going to do in this tutorial just for your information and if you want to have a look at the code there is this repository here by Microsoft actually where you can already see that there's a server project all the Blazer related stuff and then also another really small project the client project and we will now use this one to help us creating the webassembly project so let's dive into it real quick the.net Web Academy is now open for enrollment but only for a really short time spots are also limited so if you're interested then please check out the link in the video description in the academy we cover all things related.net Blazer Tailwind CSS git GitHub actions deploying to Azure many more stuff so if you're interested please go down to the video description check out the link and if you're thinking maybe my company could cover the cost of the academy then great news I've got an email prepared for you that you can just copy and paste and then send to your boss again Link in the video description and now let's continue with the tutorial we go to visual studio it's version 17.8 preview this is important because here I'm using.net8 preview 7 and when you decide to create a new blazer project I see it here in my recent project templates but of course you can also just search for a Blazer here and then the new thing really that Microsoft wants you to use actually is the new blazer web approject again one template to rule them all you go to next you call this Blazer wasn't maybe was um dot net eight just the example and then you see that configure for https this is standard right we can activate server interactivity components this this check mark here this is Blazer server all right not server side rendering don't confuse this please server side rendering just means that you get the complete HTML and then when you download the HTML to the browser the browser then displays this thing but you won't be able to well click a button and then see a result I know this sounds strange maybe but this service and rendering just means when you use a form then you would have a page refresh correct me if I'm wrong but not in this case right so with this thing now you would use Blazer server and there will be at least Microsoft promised that or Daniel Roth promised that that there will be another option here to also activate webassembly by default into this template you can already do this actually with the help of the CLI but let's just do this here step by step so I think this helps better understanding what is actually going on here so there will be another check mark in the future maybe in a couple of days already with preview 8. let's see about that but at the latest I guess on release date The I guess November 14th will be the day for the final version of.net8 can't wait to get it all right so you see it here you've got your Blazer server stuff pages are now the example uh files here we've got a counter page where we can see the new render mode server but let's ignore that we Dive Right into webassembly so what we do here actually is right click the project add a new project and for now we can choose a Blazer webassembly app and let's just call this um a blazerwasm.net 8 and then client maybe not the best name but I guess it works and here now you also see there's no asp.core hosted option right so we can try to figure this out later in another video for example when you want to add a web API you don't know how to do this yet so you want to use now Blazer server and stream rendering and Blazer webassembly but they should use a web API so you have three projects there how would you do that if you want to know please write it down in the comments and I'm happy to create another video so create web assembly and you see that still we've got a bunch of files here that we do not really need for instance WWE root is not necessary we actually already have a WWE root folder with a CSS file so this may result in some conflict so let's just delete this and then another thing would be the appraiser this is also not necessary here so delete this as well we've got the pages here and the only components I'm just using the other example I want to use is actually the counter eraser so let me just move this to the shared folder and then delete this file and this file here and also these pages well just the whole folder right I think this works now we've got the counter here as you can see it's still a page but again not on my turn I don't want this to be a page I want this to be just a component that is used by webassembly you see here that here we actually got a page called counter so what we can actually do now is we just remove the whole stuff here and also for now the render mode because the render mode for the whole page there will be again with the release this render mode webassembly but for now this does not work but we can tell this the component specifically that it should use webassembly so we've only have the page here on Blazer server or on the server side with the page title that's nice this is everything we need regarding the page regarding the other files for the client we've got the counter component we've got the Imports and the program CS right now the program CS as you can see here now we've got an error because we deleted the app file we actually don't need that right so we can delete it and also delete the using statements here great so this is our now minimized program CS file and then the next thing we need is the server has to know what's going on in the client so we just add a project reference all right and that's the one so simply the client projects awesome another thing we have to add is the nuget package for webassembly so here manage nuget packages and I'm happy that I already typed it couple of times now so yep there it is Microsoft asp.core components web assembly server this is what we need so please install that as well again when the template is there with the full release of.net I guess you do not have to to implement it by yourself but still I like it that way because then you really know what's going on make sure to check this here include pre-release so you get the 8.8 previous 7 version right that's that another last thing we have to do is modify the program CS of the server project here you already see add server components you already add now webassembly components and we also have to add or render modes so here we've got the server or render mode and then also the web assembly render modes and with that we are already done so let's run this I hope you're done maybe I forgot something I'm not sure about that but we'll see all right here it is and we get this new security alert because of HTTP 3 which is used now that's awesome but now let's open the console real quick and now it will be interesting what's going on here let's just focus on the counter page here we do not see anything interesting right because let's have a look again we see the counter page here we've got the page title and that was taken from our page here great so this actually works right but now we want to see the components so how is this done well we just added here at the counter with this crazy name now because well you know it's from the other client from the other project and here now you can close it and now comes Something Beautiful the new render mode although intellisense or intellicode has no idea what I want here but then we can give this the new render modes and then there should be something available webassembly all right we also got a server and Auto so just to explain this really quick server means well it would be exactly the same thing that we had before with our web assembly so in essence we would have a websocket connection and with the head of this websocket connection then we get the interactivity so you click the button you see a result webassembly now means we download the component let's say to the browser to the client have no latency issues right no websocket connection we just use it on the client and we see directly what's going on and with auto now the big promises and it actually already worked is that we start with the server interactivity so we have a websocket connection but in the background we already also download the web assembly stuff so the next time the user visits the page and the web assembly stuff is still cached then we will use webassembly much faster great stuff so now let's just say webassembly it's safe and restart the application and we get an error why is that add render I see it is not render mode with a capital M lower case m let's try that one more time and there we are and you see loaded big file will be smaller when published and we can also actually see it here as well in the wasm tab that the.net native was the most downloaded don't get confused by these websocket things these you should only see when you're developing on your local machine right this is the important stuff and also in the console we don't see anything websocket related right so click me here and this works and this is everything and if you want to know more also about the other new render modes and also the other features like stream rendering then I recommend checking out the video you see here on the screen so then thank you very much for watching don't forget to subscribe and hit the like button thank you very much and I see you next time take care

Channel: Patrick God

Views: 2,889

Keywords:

Id: JiEQ84igEXw

Length: 14min 8sec (848 seconds)

Published: Thu Aug 31 2023