Blazor Web App Template | Blazor | .NET 8 RC 2

hi I'm Ganesh and in this video we're going to talk about the new blazer web app template in net 8 so let's start Visual Studio 2022 preview click create a new project now let's select the new blazer web app template and click next give the project a name say Blazer new features and click next in the framework dropdown we can see we have net8 selected and below that we see we have authentication type that is by default set to none if you click the drop- down we also have the individual accounts option this will produce a Blazer based identity UI and set it up for us let's leave it to none and further down we have two more drop downs one for selecting the interactivity type and another for selecting the interactivity location let's see what these do the interactivity type drop down let's just select which interactive render modes we want to enable for our project with the none option the application will have no interactivity so it will simply use static server rendering without any interactivity either on the server or on the client if we want to enable interactivity on the server using interactive server rendering then we can select the server option this is the default option by the way or if you want to enable interactivity on the client using interactive client rendering then we can select the web assembly option and if you want to enable both interactive server rendering and interactive client rendering and the ability to switch between them at run time then we can use the auto or the automatic option we'll talk about the different interactive render modes in detail in another video now one thing to note with the web assembly and auto interactivity types an additional client project will be created and add it to a solution we'll talk about that later in this video for now set the interactivity type to server the interactivity location drop down determines where in our app we want to enable interactivity if we select the per page or component option then interactivity will be enabled at the page or the component level so this means that the entire application will use static server rendering and then interactivity will be enabled on a per component basis on the other hand if you select the global option then interactivity will be enabled globally for the entire app so this means that if for example in the interactivity type drop-down we select the server option and in the interactivity location we select glob mobile then it behaves just like a Blazer server app in Net 7 similarly if you select the web assembly interactivity type and Global interactivity location then it behaves just like an asp.net core hosted Blazer web assembly app let's leave the interactivity location set to per page or component and finally if you want to include sample pages and a layout based on bootstrap styling we can leave this checkbox checked and then click create once our project is is created go to the program.cs class file this file contains the entry point to our application here we are creating an instance of the asp.net C web application Builder and adding various services to it first we are registering the services required for razor components and since we enabled interactive server rendering in the project template we have this call to add interactive server components this method adds the necessary services to support interactive server rendering then we are calling build on the web application Builder instance which will return an instance of web application and if you scroll down we can see we are configuring the middleware pipeline and finally we are calling app. map Razer components which discovers any available routable razor components and set them up for endpoint routing and for the type argument we specify app which is a root component for our application and add interactive server render mode configures the server render mode for our application and finally we're calling run on the web application instance to start the application now expand the components folder which is where we find all our components and double click app. Riser this component is a root component for the app it contains the usual HTML markup along with the Head outlet component the routes component and the Blazer web app script which is blazer. web.js the Blazer web app script enables Progressive enhancements for the app such as enhanced navigation and form handling and streaming rendering then we have the routes component this component sets up routing using the Blazer router component next the pages folder contains the apps routable server side razor components first we have counter. Razer which implements the counter page so here at the top of this page we seeing the old way of setting the interactive random mode this API has been replaced with at render mode razor directive so we can simply say at render mode render mode. interactive server so this turns on interactive server rendering for this page now render mode is a static class an interactive server and other properties are static properties on this class so instead of prefixing the property with the random mode class we can use a shortcut so go to theore imports. Razer file and use the C using static feature so let's say at using static microsoft. aspet core. component . web. rendom mode so now we can go back to the counter component and remove the rendom mode prefix like so next we have the error page the homepage and the weather page and for the weather page we have an attribute here that turns on a progressive enhancement called streaming rendering now let's expand the layout folder the layout folder contains all the shat components and stylesheets for the apps layout so it contains main layout. Razer so here we have the N menu component and if you scroll down we can see the Blazer error UI here then we have the style sheet for the main layout component in main layout. razor. CSS then we have nav menu. Riser which implements the navigation menu the sty sheet for the na menu component is present in na menu. razor. CSS next we have the app settings. Json file which contains any configuration settings for the project next next the www root folder contains public static assets such as bootstrap stylesheets and other CSS files and images and finally the properties folder contains a file called launch settings. Json which holds development environment configuration now let's close Visual Studio click save and start Visual Studio once again click create a new project and select the Blazer web app template and click next and give the project a new new name say Blazer new features. net 8 and click next this time let's set interactivity type to Auto an interactivity location to Global and click create as you can see here an additional client project has been created and added to the solution this is because any components using the web assembly or Auto render modes must be built from the client project so if you go to the server project and double click program.cs class file we can see we have the call to add interactive web assembly components which configures the necessary services for enabling interactive client rendering and if we scroll down we have ADD interactive web assembly render mode which configures the web assembly render mode for the app the add additional assemblies method specifies any additional assemblies containing routable razor components that need to be discovered if we expand the components folder and double click app. Razer we can see we are enabling Global interactivity by setting the rendom mode razor directive attribute for the routes component and for the Head outlet component by setting the random mode for the routes component to interactive Auto the Blazer router will have its rendom mode set to interactive Auto which will in turn propagate its random mode to all the pages it routes essentially making the entire app interactive now finally in the client project we have the program.cs class file which contains the startup Logic for this project next we have routes . Razer which contains the Blazer router next the underscore imports. Riser file contains common razor directives such as using directives then the pages folder contains all the routable razor components first we have the counter component next we have the error component but the error component should not be a part of the client project here so if you click build build solution we see we get an error so this is a bug inet 8 rc2 so let's fix this so let's right click this error page and click cut and go to the server project and right click the components folder and click paste now once again click build build solution as you can see the build has succeeded then we have the usual homepage and the weather page and the layout folder contains the layout component which is main layout. Razer its corresponding stylesheet main layout. razor. CSS then we have the namu component and its stylesheet Nam menu. razor. CSS and finally the www root folder contains public static assets and the app settings. Json file which contains configuration settings for the client project so that completes a description of the Blazer web app project structure so that's it for this video hope you found the video useful thanks for watching

Channel: CodeGanesh

Views: 1,237

Keywords: blazor web app template, blazor, .net 8 rc 2, .net 8 release candidate 2, .net 8, blazor .net 8, blazor .net 8 rc 2, blazor .net, blazor web app, blazor web app template .net 8, exploring the blazor web app template, static server rendering, interactive server rendering, interactive client rendering, interactive webassembly rendering, global interactivity, interactivity type, interactivity location, interactivity location global, render mode blazor, asp.net core, codeganesh

Id: kN6YIin9jSc

Length: 9min 52sec (592 seconds)

Published: Sat Oct 14 2023