Blazor Tailwind Template for .NET 8 is here!

in today's video we're going to delve into a new project template redesigned for working with blazer for net 8 Blazer enables developers to build interactive web uis using C instead of JavaScript and when combined with the service stack Blazer components Library you can jumpstart your upcoming business application by ensuring seamless coordination between your web services and user [Music] interface the new blazer template is built with net 8 which means you can benefit from the latest features and improvements to not only Blazer but to aspet andet as a whole a good example of a quality of life feature that's now built into net 8 is streamlining the process of creating Docker images with net publish this makes containerization and deployment smoother than ever while also benefiting from some best practices that the net SDK automatically implements when containerizing your application and for those familiar with aspet core identity we've also streamlined authentication and authorization to your service stack services on top of that we've baked in tail in CSS for styling handing you a powerful toolkit to easily create stunning and adaptive user interfaces to get started we're going to create a new project based on this template using the service.net X tool and the command X new blazer space my app this will scaffold out a new blazer project called my app which you can open with your favorite net IDE opening the apphost project at the top we can have a look at what we're working with when it comes to building a Blazer server application with net 8 using this template the template sets you up with a robust starting point utilizing SQL light as a database and integrating ASP net core identity for authentication you'll find The Entity framework migrations in the same migrations folder just like orm light to run these migrations and set up your database you can use the command npm run migrate as well as using the standard netf CLI tools using the command netf database update just like other service stack templates we have split this solution into four projects which is our apphost service interface service model and tests project and since we have the availability of net 8 here we're utilizing the net to Docker tools so we can use the standard net publish command to containerize our application automatically this net8 feature is utilized in the provided GitHub actions for deployment which allows you to automate the deployment of your application to a standad Linux server via SSH if you run net publish locally and have Docker installed on your machine we get an image that's pushed to our local Docker desktop application as we can see here this greatly simplifies the process of containerizing your application and follows some of the best practices when it comes to security like ensuring that your application is running as a nonroot Docker user within the published container running our project we are greeted with a responsive application that utilizes Tailwind CSS and Pres presents several example pages on this leftand menu Blazer for. net 8 supports multiple render modes and makes a significant distinction between pages that have interactivity and pages that don't so for this template that is preconfigured to use the interactive server render mode it means that when interactive components are required it is using the Blazer server method of Hosting to process user interactions rather than say web assembly on the client this means it has an active websocket connection with our browser passing messages to the server for every interaction we make with our user interface this can be ideal for business applications where you have a lower latency connection but isn't well suited to internet hosting for public websites however when we navigate to the weather example page it's using something called streaming rendering since it's a non-interactive content content that we are displaying on the page this allows us as developers to provide a better user experience when it comes to presenting data that may take a longer time to process instead of holding up the loading of the whole page the initial Chrome of the page is loaded and the long running process then streams the result in HTML while seamlessly patching it into the existing Dom on the client one of the great side effects of this approach means that if your application only has a few pages with interactive elements your server will only maintain websocket connections with those users who are visiting those pages the rest of the time these websocket connections are managed automatically for you and actively disconnected as users navigate away from those pages with interactive elements we've also upgraded the server stack Blazer components library for atet 8 so you can streamline the creation of automatic uis using components like Auto query grid and auto form navigating to the bookings example page in the template we can see how this works by using AIT query grid to manage bookings via a single component this component integrates directly with auto query Services giving you a create read update and delete interface from an easy to create service that is driven from your request dto and your database Model Auto query takes care of the implementation for the service for us and we just declare our model and our request dto that Define the contract for that service however if you do need to customize specific operations of your auto query Services they can be overridden like any other service deack service and the components like Auto query grid and auto form are highly customizable a good example of this is the admin bookings page which uses a lot of the defaults found in the autogu grid component versus the bookings page on the Le hand side which is more customized for users you can customize things like the toolbar at the top and which options are available as well as which columns to show and hide at different responsive levels in the UI you can also override the data presentation of IND individual columns if you still need a bit more control over your Blaze UI but still want these generated forms we can see in the bookings create model you can use the autof form components to instantly get customizable forms you can use anywhere and just like previously with blazer for net 6 you can use these Serv stack Blazer components with blazer server or Blazer web assembly Pages another great feature that server stack is incorporating into this Blazer template is the new support for aspet core identity authentication the template comes set up with example usage for two Factor authentication and just like the rest of the template all these identity pages are utilizing Tailwind CSS already preconfigured so you can make greatl looking account management uis that have easy support for dark mode right out of the box using identity also means you don't change the way where you secure your service stack Services they work exactly the same as if you were using the service stack authentication model for example on the create booking Auto query request dto we can see the attribute used of validate has rooll which specifies the role of the employee and this is exactly the same attribute you would use if you're using the service stack authentication model but now it's working with aspet core identity for authentication blazer for net 8 brings a range of quality of life improvements for creating Blazer applications and our new service tech project template is designed to put all these enhancements right at your fingertips from all the functionality and features that the service dech framework has to offer combined with functionality like Tailwind ASP nut core identity and service deack Blazers component Library you have everything you need to create a great line of business application well that's it for this video if you have any suggestions or feedback leave a comment below and let us know how you're finding Blazer for.net 8 you can also join us on our community Discord or GitHub discussions serice stack is free for individuals so anyone is welcome and as always thanks for watching

Channel: ServiceStack

Views: 8,225

Keywords:

Id: hqyozHSL0Nk

Length: 9min 17sec (557 seconds)

Published: Tue Nov 21 2023