Blazor WebAssembly — Part I: Installing and preparation with MudBlazor
So… The time has come to try to make something “Professional” on Blazor WebAssembly! This technology had already time to be more mature, so, it´s time to try it for “real”! Unfortunately, in my current job we are not working, NOT EVEN NEAR, to Blazor, so I had to be creative on my own! Well, I made some research, and I´m going to use MudBlazor Framework for the UI, it seems like Bootstrap with steroids, so I want to give it a try!
The project that I thought was something like “portal style” for a very specific niche, and I will use Blazor for it, but I´ll make a separate solution with all the value learned to share with you!
This means, that we will have a series of Medium articles just for you!
Part 1 — Blazor WebAssembly: Installing and preparation (this article)
Part 2 — https://cras-dev.medium.com/blazor-webassembly-part-ii-calling-an-external-api-e11868e43aeb
1 — Tools
- Visual Studio 2022 ( https://visualstudio.microsoft.com/vs/ )
- .Net 6.00 Framework! ( https://dotnet.microsoft.com/en-us/download/dotnet/6.0 ) (Yeah going for the 6.0, It´s LTS so we are cool)
- Coffe! Lots!
2 — Preparation
After having either .net 6.0 and Visual Studio 2022 on the machine, the time has come to draw some Architecture. As I´ve said I will try out to make something professional. I will not post my Schematics here and line of thought, as the final project will be probably put to production use, but, I will try an approach that has been in my pipeline to try, the UseCase Design approach. So, for each “need” I will create a UseCase class, with 1 public Execute method (in some cases, it can be named ExecuteAsync() and in some other cases, it can have the Execute() and ExecuteAsync() methods), and those classes will have all the Bussiness logic needs, and they will also have the connection to repositories and all externals!
Please, the goal of this article is not architecture and I know at least one Architect at this moment, that when he reads this, he will be jumping in his work chair and pulling his hair off!!!!
But let´s get back into business!
3 — Starting project!
Open visual studio 2022, create a new project, select Blazor WebAssembly, give a super name to your solution, and also double-check if the version of the Framework is 6.0 in the last screen before going for it!!!
And press the mighty button CREATE! (Insert epic music here)
3 — First thoughts
What the hell??? WHERE IS MY STARTUP.CS ??? So it seems that Microsoft just “merged” Program.cs and Startup.cs, it´s ok I guess, just have to adapt, but hey, it was me that wanted new things!
And the content on Program.cs … well… Again, it was me who wanted new!!! =)
Ok after the initial shock on those files and some research, I am now confident, so let´s start adding the dependencies that I will need for now. And they are:
So in reality to add MudBlazor is just :
a) Add the required nuggets
b) Add JS and CSS to the file wwwroot/index.html
c) Add the namespace in _Imports.razor so everything goes easier!!
d) Add the directives at the level of the layout, in the file Shared/MainLayout.razor. I recommend this for the moment:
e) Add the required MUD services to the startup.cs …. UPS, to Program.cs!
Time of truth! Let´s click Play and see if it works…. and it does!!!
Next on my plan, I want to call a simple API, a Weather API to get the forecast, and start playing with my brand new Blazor solution!
Next Article:
- Call an External API using the proposed Architecture inside Blazor
Thanks for reading and see you in the next article!
https://cras-dev.medium.com/blazor-webassembly-part-ii-calling-an-external-api-e11868e43aeb
P.S: You can check this code in