Blazor Hero - Clean Architecture Solution Template for Blazor WebAssembly

hey everyone i'm mukesh from kodutmokes.com and in this video i'll be walking you through blazer hero right from what it is and how you can set it up on your machine and start generating complete blazer applications so without any further ado let's get started [Music] blazer hero is one of the newest open source project that was built with an idea to integrate a really clean looking ui with a well-structured back end so for the ui we are using mudbracer component library from mudblazer which is quite a popular option for blazer nowadays it gives a nice material design feel to the entire application so a huge shout out to them as well for the back end we are following a hexagonal architecture also known as onion architecture if you have not read my article on onion architecture for asp.net core feel free to find the link in the description section of the video now whenever you decide to use blazer in your new project there is going to be a lot of time investment needed in many aspects so that is going to be right from choosing the coolest looking ui to building a scalable backend and trust me it is going to be a lot of research work so to address to this very issue i have come up with plays blazer hero which is a complete application which comes with tons of features right out of the box that includes signalr chat with identity hang fire mud blazer clean architecture and so much more so the bottom line is that this project could potentially save you around 30 to 40 hours of research and development time and this is how it works so developers could either clone the blazer hero repository or install the new get package via the cli and start generating their own complete blazer applications and all this will be happening with just one line of cli command so this part i'll be showing later in the video but for now let me show you project structure of the blazer application here is how the blazer hero project is structured now this is a very modular and scalable form of architecture with the domain and application logic right at the center of the design so based on onion architecture you would have to put your entities right at the center of the application which is the domain layer here so note that you can note that there is no external dependency for this project i have added in a few boilerplate codes to demonstrate the implementation so you get product brand and document management out of the box with blazer hero for your reference so now in the application layer which references the domain layer it consists of various interfaces that has to be implemented outside the core section so this is what is known as inversion of dependency now the application no longer has to depend on any external projects or libraries and the implementations can easily be switched if necessary so let me give a quick example for this do you see the i email service here so now there is a contract sent async which obviously sends emails so the implementation that i have done here is via the smtp so let's say tomorrow we have a new service provider let's say send grid so it is easily possible to add in a send grid email service within the infrastructure player that resides outside the core layer and will not there will not be any fatal issues with the application so this is a part of the clean architecture design that we have implemented here next in the infrastructure project we get to see all our services and repository implementations this is where the entity framework code context live as well if there are any cross-cutting concerns it would be placed in the shared infrastructure project so for now only the email and date time services are the implementation available in this project i have also added another shared project for some commonly shared dtos and certain constants however this is completely optional finally the last and the most interesting layer in the web so this is where you get to see the blazer server and the client project it's important to note that the client does not access the data directly from the infrastructure layer but the server exposes api endpoints which is then consumed by the client project using http client the client project consists of all the razer components and pages styled by madblazer the shared client project has the managers that actually consume the secure web api via the http client we're using jwt authentication to secure the project now the server project contains the api controller which then passes the request via mediator library in cqrs pattern to the application layer now from the application layer it uses repository and the specification pattern to consume the data from the database so this is the entire setup of online architecture so to know more about this architecture i would again recommend you to go through my onion architecture article which goes in depth to the complete architecture implementation from scratch note that you can find all the important links that i mentioned in this video down in the description section now let's get started with setting up laser hero into our cli so we are able to generate complete blazer projects via the cli you need to make sure that you are using the latest version of visual studio 2019 ide which is version 16.8 or higher along with the latest.net phi sdk you should also have the latest dot and efcli tools installed you can use this command to install the latest versions and it would probably help if you have an idea about these two articles as well so once that is done let's open up command prompt and run in the following command this installs the entire solution template globally onto your machine you can see that we have currently installed blazer hero.clean architecture now as next step let me change my working directory to create a new blazer application so i'll be running this particular command to change the uh directory and after that to create a new blazer application with the blazer hero template let's copy paste this particular command and run this as well note that this will be the name to my entire app laser application so it says that the template has been created successfully let me check my directory so here you can see that the entire application is generated with the blazer hero template so now let me open up the solution as expected the project warehouse manager has been created successfully with the blazer hero template you can see that we have already maintained the solution structures as well as the naming conventions so the first thing you got to do is set your server project as the startup project so once that is done i would recommend you to switch the kestrel server with that out of the way let's open up package manager console and set your default project as the warehouse manager dot infrastructure as you know that this is where our application db context live we need to apply the migrations as well as update the database here so let me run the basic update command so there you go your database is now ready so let's check if our database has been created properly so for this let me open up the sql server object manager and browse to the location where my database is being created so you can see that this is where our tables have been created so one more important point to mention is about the app settings of the server project now by default blazer hero comes with a local db instance of microsoft sql server to switch the connection string you can simply open up the app settings or the app development settings and change in the connection string as you require so once that is done let's execute our application i'd prefer to use the start without debugging so this would open up the terminal window which says that it has been seeding the administrator the basic rules and so how it works is as soon as the application starts for the first time there are few sample data that is being seen into a database which includes the roles different roles for now i have been seeing administrator and a basic role as well as an user with administrator role and a user with basic role here is a login page of blazer hero i have included few buttons to fill in the administrator and user credentials but for now we'll start with registering a new user so once the user is registered the application sends an email to the registered email address in blazer hero we are currently using ethereal mailbox for development you could easily switch to any smtp servers so let me login to my ethereal mailbox to check the confirmation email once i received the confirmation email i could easily confirm the user by clicking on the link once the user is confirmed i could go back to the login page and log in with the credentials and there you go we have successfully signed into blazer hero dart mode and localization comes out of the box with blazer so this is how you activate dark mode and the localization works like this so now there are quite a lot of languages available in our localization but feel free to add in your own languages in the repository in the account page you'll be able to modify your profile details so this includes your first name last name the phone number and you could also change your password as well profile pictures are also allowed in blazer hero so this will be reflected throughout the application swagger is also included in blazer hero for development purposes so you could see all the apis that are being exposed by the server project so just as a demonstration you could probably open up the token endpoint and paste in your credentials so i have copy pasted my credentials here and once you execute you will be receiving the token this is the jw token that is generated by the server now this token you could use in the authorized header by typing in bearer space the token now this will allow you to fetch the data from secure endpoints like products so currently we just have one product that is available in our database so as mentioned earlier in this video we have a complete management of products brands and documents so let's get started with the crud management in blazer hero i'll get started by creating a new brand so from here you get an option to edit or delete the current entry now let's create a new product as well so similarly you get an option to both edit and delete the product entries signalr integration is one of the prime features of laser hero the brands and product thread operations are linked to the signalr hub which means that any addition or modification in the count of the brands or products would directly reflect into the dashboard in real time so now for the demonstration i have opened up two instance of blazer hero in two different browsers so let me start by adding a new brand so you can see that at real time signalr is able to send a notification that a new brand has been added this is applicable while you delete a particular brand as well now let's look into the user and rule management system of blazer hero under the users page the administrator will be able to register new users directly into the system so from here we'll also be able to view the profiles of different users as well as the administrator could probably activate or deactivate a particular user's profile similarly in the roles the admins can add new roles as well as manage the permissions so these are the default permissions that comes along with blazer hero document management is a newly added feature of laser hero version 2.0 as expected it allows you to store in documents within the file system so now from here you get to choose if your particular document is available to the public or is it private to you so let's add a particular document the document can be of any type a jpeg or a document file or anything else so once this is uploaded it is available for you to edit delete or download so this is how the document management system of blazer hero works now this particular document can also be available to the public if it is selected so if not it will be available only to the owner audit trail tracking is yet another important feature of blazer hero so from here the currently logged in user can easily see his activity within the entities so for example do you remember creating a new document so that is what is being mentioned here so when you click on the show details you get to see the inner details of what are the type of data that is being manipulated so for example this type is a create now so the particular user is creating a new file with the following parameters so this can be quite handy when tracking user activities also within the audit rails we have an expo to excel function that fetches the data from the audit trails table corresponding to the current logged in user and exports it to an excel sheet so saving the best for the last chat application is by far my most favorite feature of laser hero so this particular implementation is integrated with signal r and microsoft identity this helps us to have an one-on-one conversation with the different registered users of the application so for this demonstration i have opened up two browsers with two different users so let me open the chat application so from here you can see that there are two available users for chat so let me select john doe which is the second registered user here and send him a message you can see that there's a nice notification and a notification don't played so let's open up directly the chat so from here john doe is able to reply to the first user and the notification comes back into the first user so this is how the entire chat application works so there are quite a lot of possibilities with the chat applications like sending voice messages or attachments i believe it will probably come up in the future versions of player hero so these are the important features of blazer hero for more documentation and details you could always refer to the blazer here quick start guide for which the link will be provided in the description as well so if you like this project do not forget to leave behind a star in the github repository so we have crossed nearly 600 so i'm hoping to get around a thousand within a month or two so that's a wrap for this video i hope you really enjoyed the video i would appreciate if you could leave behind your feedback in the comment section of this video so do subscribe and have a great day [Music]

Channel: codewithmukesh

Views: 31,895

Rating: 4.9702234 out of 5

Keywords: blazor, asp.net core, clean architecture, microsoft, blazor webassembly, blazor hero, blazor clean architecture, blazor mudblazor, mudblazor

Id: j7BxKN7HYjk

Length: 17min 30sec (1050 seconds)

Published: Wed Apr 14 2021