Blazor For Beginners – Getting Started with Blazor
In this article, we will discuss the basics of Blazor and the tools required for Blazor Application Development. We will go in-depth with the concept of Blazor, the problem it solves, how to set up the development environment, talk about Server and WebAssembly, fire up your first Blazor Application, and a small comparison of various types of Blazor Projects.
This article will be the first part of my Blazor Blog Series. I will try to post articles that can help you get started with Blazor in no time. Do not forget to subscribe.
- Getting Started with Blazor – (You are here)
- Exploring Blazor Project Structure
- Blazor CRUD with Entity Framework Core
There is quite a hype about Blazor and how awesome it is. It’s truly a game-changer by Microsoft. In this blog series, we will go step-by-step in mastering and getting very familiar with this new Stack. 😀
Life Before Blazor
So, Is it possible for .NET Web developers to do the same with C#?
And Microsoft snaps, “I’m M-I-C-R-O-S-O-F-T” *snaps* 😀 ( Quiet dumb 😛 )
What is Blazor?
This awesome new Tech offers two kinds of possible hostings.
- Blazor WebAssembly – In this approach, the application completely runs on the browser via web assembly. Everything that the application needs will be downloaded on to the browser and executed. This is more of a client-side hosting model.
- Blazor Server – Here, as the name suggests, the application is executed on the server. The server will be a ASP.NET Core Application ( This would probably be the hottest trend in Blazor development). So, in this model, there will be the server and the client which will be connected by a SignalR link. On any event, a signal-r message will be transmitted to the server via the client. The server evaluates the request/event and calculates the difference in the HTML required. In this way, it doesn’t have to send the entire HTML snippet back to the client, but just what is required. This is highly important for Single Page Applications.
Setting up Blazor Development Environment – Prerequisites
.NET Core SDK 3.1.300 or later (* Very Important * ) . Get it from here.
PS, .NET Core 3.1.300+ includes Blazor WebAssembly Template as well.
- Visual Studio 2019 ( You can check out my Installation Guide of Visual Studio 2019 Community which is completely Free to use.) Make sure that ASP.NET and web development workload is installed.
- Visual Studio Code. Get it here.
- Also, .NET CLI
Tech Stack Knowledge.
- C# ( a bit more than the basics )
First 2 Blazor Applications
Let’s jump in the world of Blazor by exploring 2 of it’s hosting models. Open up Visual Studio, and create a new project. Search for Blazor App.
We will be creating both the Hosting Models of Blazor in the same Solution for demonstration purpose. Let’s start by building the Server Model first.
Select the Server App with .NET Core 3.1 and continue. This will create the Server Project for you.
You can see that our Server Project is created. As mentioned before, let’s add the WebAssembly Project too. Right Click on the solution and select Add-> New Project.
Now both the Blazor Applications are generated. Let’s build the solution and run both the applications.
Congrats! You are now able to run the Future of Microsoft right on to your machine 😀 You can see that there is not much difference in the starter templates provided by Microsoft for both these types of models. Let’s discuss the differences.
Blazor Server vs Blazor WebAssembly
|Blazor Server||Blazor WebAssmebly|
|+ Does not download the Entire Application to the Client Browser. Hence faster for every request.||– Loads the entire application into the Client Browser. The First Request will always be slow. From the Second request, the application will be much faster since it will be cached by the browser.|
|+ Highly Secure since the DLLs are not accessible by the client.||– Security may be a concern if the architecture is weak.|
|– Needs an ASP.NET Server to be available and active 24*7||+ More of a serverless model. Relies on the Client Browser only.|
|– The overall performance might be slower than the Client Model because every request will need a round trip from and to the server.||+ Better Overall performance.|
|– Scaling the application will be costly.||+ Since it is a serverless approach, scaling is not an issue.|
That’s it for the first part of my Blazor Blog Series. We have now gained quite a lot of knowledge about Blazor and the solution that is provided. We will build upon this knowledge to become experts in this Stack. To get notified about upcoming guides on Blazor, subscribe to my newsletter (You can find the form down at the bottom of this page). Thanks!
Read the next part of the Blazor Blog Series – Exploring Blazor Project Structure
If you have any queries or suggestions , please leave them on the comment section below! Happy Coding 😀
I like your art is simple and clear. But column on table and IMG are not on the same order and it is confusing. On img web assembley on the left but i’m table on right. Thx
The details are articulated in simple and clear format. Thanks i started blazor stuff today.
Thanks for the great post!
Your blog posts look like a great way to learn Blazor!