Blazor Files And Folders

Introduction

In this article, I will explain the project structure of Blazor Server and Blazor WebAssembly. I will create projects of both types and explain the differences and similarities between both.

I will describe the below-mentioned points in detail

What is Blazor
What are Blazor Server and Blazor WebAssembly
Folder Structure of Blazor Server
Folder Structure of Blazor WebAssembly

What is Blazor

We have different programming languages like C#, Java, etc. For client-like development, we use JavaScript frameworks like React, Vue, and Angular. These frameworks have a monopoly when it comes to client-side development because of what the developers had to eventually take the pain to learn both languages, which is a very tricky task to do. To solve this problem Blazor comes into the picture.

'Blazor is a free and open source web development framework by Microsoft.' This name is a combination of two names browser + razor. Blazor provides us with different hosting models. The best part about Blazor is that it uses C# for both the client side and server side.

Microsoft introduces the Blazor Framework in the year 2018.
Blazor is an open-source web development framework.
Blazor can use C#, HTML, and CSS to create web-based UI components.
Blazor uses the Razor pages which execute directly on the client's browser.
It is a Single Page Application based framework.
It is also a component-based framework.

What are Blazor Server and Blazor WebAssembly

Blazor comes with two important hosting models. Blazor Server and Blazor WebAssembly. Depending upon the requirements and the below-given points, we can select anyone.

Blazor Server Advantages

The download size is much smaller than a client-side application because which the app loads much faster.
The application takes full advantage of the server's capabilities.
Thin clients are supported.

Blazor Server Disadvantages

The first one is higher UI latency.
There is no offline support, if the connection fails, the application stops working because it needs an active connection.
The scalability is challenging for apps with many users.

Blazor WebAssembly Advantages

There is no such server dependency. The application is fully functional after the download to the client.
The client's resources and capabilities are fully leveraged.
Work is offloaded from the server to the client.

Blazor WebAssembly Disadvantages

Browser capabilities restrict the app.
The download size is larger, and the app takes longer to load.
WebAssembly support is required.

With these points, you will be having some idea about the selection of the hosting model.

Folder Structure of Blazor Server

To create a Blazor Server App we need to follow the following steps:

Open Visual Studio 2022 and click on create a new project as given below,
Select the Blazor Server App option and click next as given below,
Now you will see a screen as given below,

The above-given image contains the complete files and folders on the right side in the red box. This is much similar to the ASP.NET Core folder structure except for some files and folders. Now we will explore each of them one by one. Let's run the application and see what we have out of the box.

In the above-given image, we have one side navbar with three pages i.e Home, Counter, FetchData. Home is a default page where we have the heading and some content. The next page that we have is a counter page and it displays a counter. If we hit the button quickly you will notice that the court is increasing. The last page we have here is fetching data. This is just a sample data fetching from some other service. Now we will see each of them in the visual studio. We will proceed further by these numbers given in the image below.

Pages and shared folders would have some pages, which will be CSS, HTML, as well as razor components. The one that ends with .cshtml, are the reserved pages that you would have already worked on if you have worked with the MVC application. But we have something new here which is .razor these are called razor components.
A shared folder typically will have components that are shared across all of the pages, like we have a navigation menu and so on.
Next, we have _Imports whatever @using statement you add here those using statement will be implicitly added to any of the pages so that if there are some using statements that you need to use across all the pages or most of the pages, then you have had it right here. That way you do not need to write them everywhere.
Then we have App.razor which is the main page of our application, and you will see a component here with router found and not found, this component is responsible for all the routing.
Now we have Program.cs where we have app.MapBlazorHub(), where we are actually adding and configuring the SignalR connection for our Blazor application. SignalR is the heart and engine of razor application. It's basically the service that will talk to the main application that is running and once anything is changed, it will tell them that, hey these things have been changed and we need to rerender and do something on the UI and things like that. The next step here is app.MapFallBackToPage("/_Host"). So that basically is the default page. As given below,

Folder Structure of Blazor WebAssembly

To create a Blazor WebAssembly project we need to follow the following steps:

Select Blazor WebAssembly App and click the next button as given below,
Now you will see a screen as given below,

The above-given folders are much similar to the Blazor Server App except some of the files are missing in WebAssembly as you can see in both images. First, we will run the program and will see what comes out of the box.

As you can see in the above image output of both the hosting models is similar. Now we will explore the folder structure of the Blazor WebAssembly and will see how this is different from the Blazor Server.

WebAssembly Folder Count

The first thing is that there is no appsettings.json file inside the WebAssembly project. Inside the server application, we will actually be hosting the SQL Server connection strings and so on. Here we will be consuming the APIs to retrieve the data.
Let's examine the App.razor in both of them. You can see that this is exactly the same in both projects.
Let's examine the Program.cs, this will be different if we compare both. Because when we have a server application we have to add services to the container. We have to configure the pipeline and build the application. We have all of the server components,

WebAssembly on the other hand is very lightweight here. we just have to create a default application as given below.
Inside the pages folder, we have the same Index, FetchData, and Counter.
Inside the Shared folder, we have the same NavBar and Layout components.

Now we are able to see how the folder structure of both the hosting models is different. But the output is always the same. We have to decide based on our requirements which one we have to use.

Article in a Nutshell

Blazor is a free and open-source web framework developed by Microsoft.
Blazor comes with two main hosting models i.e. Blazor Server and Blazor WebAssembly.
Blazor Server takes full advantage of the server's capabilities.
In Blazor WebAssembly, the client's resources and capabilities are fully leveraged.
Work is offloaded from the server to the client.
There is no difference in the output of both the models just the working is somewhat different.

Thank You and Stay Tuned for More