Blazor Project Structure

In this article, I am going to discuss Blazor Project Structure in detail. Please read our previous article, where we discussed the Blazor Hosting Models. At the end of this article, you will understand the need and use of different files and folders of the Blazor application.

ASP.NET Core Blazor Project Structure:
In part 3 of this article series, we created one solution with two projects. The following is the structure.

Now, let us discuss the files and folders one by one.

Program.cs
This file contains the Main() method which is the entry point for both the project types (i.e Blazor WebAssembly and Blazor Server).

In a Blazor server project, the Main() method calls CreateHostBuilder() method which sets up the ASP.NET Core host.

In a Blazor WebAssembly project, the App component, which is the root component of the application, is specified in the Main method. This root component is present in the root project folder in the App.razor file.

Components are the building blocks of a Blazor application. We will discuss everything you need to know to build effective and reusable blazor components in our upcoming videos. For now, just understand the App component is the root component of the application.

wwwroot
For both the project types, this folder contains static files like images, stylesheets, etc.

App.razor
This is the root component of the application. It uses the built-in Router component and sets up client-side routing. It is this Router component that intercepts browser navigation and renders the page that matches the requested address. The Router uses the Found property to display the content when a match is found. If a match is not found, the NotFound property is used to display the message – Sorry, there’s nothing at this address.

Pages folder
This folder contains the _Host razor page and the routable components that make up the Blazor app. The components have the .razor extension.

Index component (Index.razor) – Rendered when we navigate to the root application URL. Counter component (Counter.razor) – Rendered when we navigate to the path /counter. FetchData component (FetchData.razor) – Rendered when we navigate to the path /fetchdata. Error component (Error.razor) – Rendered when an unhandled exception occurs in the blazor app.

Shared folder
As the name implies, contains the shared components

MainLayout component (MainLayout.razor)
The application’s main layout component

NavMenu component (NavMenu.razor)
Implements the navigation menu on the sidebar. NavLink component renders navigation links to other Razor components like the index, counter, and fetchdata components. This NavLink component is intelligent enough to highlight the navigation menu item if it’s component is currently displayed.

_Imports.razor
This is like _ViewImports.cshtml file in an asp.net core MVC project. This file contains the common namespaces so we do not have to include them in every razor component.

wwwroot/index.html
This is the root page in a Blazor WebAssembly project and is implemented as an HTML page. When a first request hits the application, it is this page, that is initially served. It has the standard HTML, HEAD, and BODY tags. It specifies where the root application component App.razor should be rendered. You can find this App.razor root component in the root project folder. It is included on the page as an HTML element.

This index.html page also loads the blazor WebAssembly JavaScript file (_framework/blazor.webassembly.js). It is this file that is responsible for downloading

The compiled blazor application, it’s dependencies, and the .NET runtime. It also initializes the runtime to run the blazor app in the browser

Startup.cs
This file is present only in the Blazor Server project. As the name implies it contains the applications’ startup logic. The Startup class contains the following two methods.

ConfigureServices – Configures the applications DI i.e dependency injection services. For example, AddServerSideBlazor() method adds Blazor server-side services. On the IServiceCollection interface, there are several methods that start with the word Add. These methods add different services for the Blazor application. We can even add our own services to the DI container. We will see this in action in our upcoming videos.

Configure – Configures the app’s request processing pipeline. Depending on what we want the Blazor application to be capable of doing we add or remove the respective middleware components from the request processing pipeline. For example, UseStaticFiles() method adds the middleware component that can serve static files like images, CSS, etc.

MapBlazorHub sets up the endpoint for the SignalR connection with the client browser.

Pages/_Host.cshtml
This is the root page of the application and is specified by calling MapFallbackToPage(“/_Host”) method. It is implemented as a razor page.

It is this page, that is initially served when a first request hits the application. It has the standard HTML, HEAD, and BODY tags. It also specifies where the root application component, App component (App.razor) must be rendered. Finally, it also loads the blazor.server.js JavaScript file, which sets up the real-time SignalR connection between the server and the client browser. This connection is used to exchange information between the client and the server. SignalR is a great framework for adding real-time web functionality to apps.

The data folder (Blazor Server)
Contains code files related to the sample WeatherForecast service

appsettings.json (Blazor Server)
Just like an asp.net core MVC project, a blazor project also uses this file to store the configuration settings.

Here, in this article, I try to explain the Blazor Project Structure in Detail. I hope now you got some idea regarding the files and folders of the ASP.NET Core Blazor App.

Summary:
I hope this post will be helpful to understand the Blazor Project Structure
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉

Read More

Blazor Hosting Models

In this article, I am going to discuss Blazor Hosting Models in detail. Please read our previous article, where we discussed the step by step process to develop Blazor app using visual studio 2019. As we already discussed in our previous article that Blazor has two hosting models. They are as follows:

1. Client-side hosting model
2. Server-side hosting model

The Blazor Server App template is used to create a blazor application with a server-side hosting model. On the other hand, the Blazor WebAssembly App template creates a blazor application with a client-side hosting model. At the end of this article, you will understand the following pointers in detail.

1. Understand the Client-side hosting model (Blazor WebAssembly App)
2. Understand the Server-side hosting model (Blazor Server App)
3. Difference between these two hosting models.
4. Advantages and disadvantages of each hosting models

Blazor WebAssembly Hosting Model:
In Blazor WebAssembly Hosting Model, the application directly runs in the browser with the help of WebAssembly. So, the things which are required to run a .net application such as the compiled application code, its dependencies, and the most important .NET runtime are downloaded to the client browser by WebAssembly from the server as shown in the below image.

It is also possible that a Blazor WebAssembly application can run entirely on the client browser without making a connection to the server or we can also configure it to interact with the server using Restful Web API service calls or using SingleR.

Advantages of Blazor WebAssembly Hosting Model:
As we already discussed a Blazor WebAssembly application can run entirely on the client browser. Once the application is downloaded, then a connection to the server is not required. That means if the network connection to the server is lost, then also the client app can continue to function. So, there is no need for the server to up and running 24X7.

We do not require a full-blown ASP.NET Core web server to host our application. We just need a server somewhere, that can deliver the application to the client browser. That means you can host the application on your own server on the internet somewhere, in the cloud, on Azure as a static website, or even on a CDN (Content Delivery Network).

With code running on the client’s machine it means the server load is significantly reduced.

Dis-Advantages of Blazor WebAssembly Hosting Model:
The blazor.webassembly.js file bootstraps the client application. That means it will download all the required .NET DLL assemblies, its dependencies, .NET Runtime which makes the first request to takes a longer time. If the same client visits the application again, it usually loads the page fast because the browser caches the files.

As the application runs entirely on the client browser, it is restricted to the capabilities of the browser.

Depending on the nature of the application, capable client hardware and software is required. From a software standpoint, for example, at least a browser with WebAssembly support is required.

Blazor Server Hosting Model:
With Blazor Server Hosting Model, the application is run on the server. Between the client browser and the server, a SignalR connection is established. When an event occurs on the client such as a button click, the information about the event is sent to the server over the SignalR connection.

The server handles the event and for the generated HTML a difference is calculated. The entire HTML is not sent again to the client, it’s only the difference that is sent to the client over the SignalR connection. The browser then updates the UI. Since only the difference is applied to update the UI, the application feels faster and more responsive to the user.

Advantages of Blazor Server Hosting Model:
The application loads much faster as the download size is significantly smaller than a Blazor WebAssembly app.

Since the app runs on the server, it can take full advantage of server capabilities.

All the client needs, to use the app is a browser. The Blazor server-side apps even work on older browsers as there is no requirement for Web Assembly, only HTML, and JavaScript. As the code executes on the server, it is also possible to debug our .NET code in Visual Studio.

Disadvantages of Blazor Server Hosting Model:
Blazor server-side sets up an in-memory session for the current client and uses SignalR connection to communicate between the .NET running on the server and the client’s browser. All memory and CPU usage comes at a cost to the server, for all users. It also means that the client is tied to the server that first served it, so doesn’t work with load-balancing.

An active connection to the server is always required. This means there is a need to keep the server up and running 24X7. If the server is down, the application stops working.

As every user interaction involves a round trip to the server a higher latency usually exists when compared with Blazor WebAssembly hosting.

Scalability can be challenging especially for the apps that have many users as the server must manage multiple client connections and handle client states. However, we can overcome this scalability issue, by using Azure SignalR Service with a Blazor Server app. This service allows a Blazor Server app to scale really well by supporting a large number of concurrent SignalR connections.

Note:
One very important point to keep in mind is, Blazor Server and Blazor WebAssembly are just 2 different ways we can host a Blazor application.

In the next article, I am going to discuss the Folder and File structure of the Blazor Server App and Blazor WebAssembly App in detail. Here, in this article, I try to explain the Blazor Hosting Models in detail and I hope you enjoy this article.

Summary:
I hope this post will be helpful to understand the concept of Blazor Hosting Models
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉

Read More

Creating Blazor App in Visual Studio

In this article, I am going to discuss the step by step procedure for creating Blazor App in Visual Studio 2019. Please read our previous article, where we discussed the environment setup to develop blazor app in visual studio 2019.

Creating First Blazor App using Visual Studio 2019
Now, we are going to create our first Blazor app using Visual Studio 2019. Actually, we are going to create 2 blazor projects. One blazor project with server-side hosting and the other one is with client-side hosting.

The first step is always the first. Open Visual Studio 2019 and then click on the Create a new project option as shown in the below image.

Once you click on the Create a new project option, the new project window will open and from this window, you need to select the Blazor app and click on the Next button as shown in the below image. Here, we choose the Blazor app as we are going to develop a Blazor application.

Once you click on the Next button, then the configure your new project window will open. Here, you need to specify the Project name and location where you want to create the project. The solution name and finally click on the Create button as shown in the below image.

Once you click on the Create button, in the next window it is asking you which type of Blazor app you want to create. Whether you want to create a client-side app (WebAssembly App) or a server-side app (Blazor Server App). Here, we are interested in both the app i.e. client-side as well as server-side. But if you want then you can only create a server app (Blazor Server App) or only a client app (WebAssembly App). From this window, first select, Blazor Server App, and click on the Create button as shown in the below image.

Once you click on the Create button, it will take some time and create the Blazor server app with the following file and folder structure. In our upcoming articles, we will discuss the file and folder structure in detail.

Creating Blazer WebAssembly App:
Once we created the blazor server app, now we need to create the Blazor WebAssembly App. To do so, right-click on the solution and then select Add => new project option from the context menu as shown in the below image.

Once you select the New Project option, then it will open the add new project window and from this window, you need to select the Blazor app as shown in the below image.

Once you click on the Next button, then it will open the project configure window. Here, you need to give a meaningful name to your project and click on the Create button as shown in the below image.

Once you click on the Create button, then from the next window, you need to select the Blazor WebAssembly App template and click on the create button as shown in the below image.

Once you click on the Create button, then it will take some to create the Blazor WebAssembly project with the following file and folder structure.

Now our solution contains two projects (one Blazor Server App and one Blazor WebAssembly App). Now let us run both the projects simultaneously.

Running Multiple Project in Visual Studio:
If you want to run multiple projects simultaneously in a visual studio, then you need to follow the below steps:

Right-click on the solution and then select the properties window. From the properties window, select the startup project from the left menu. Then select the multiple startup projects radio button from the middle pane and set the project action as a start from the drop-down list for those projects which you want to run and then click on the Apply and OK button as shown in the below image.

Running Projects:
Now when you run the projects, you may get the following errors.

If you are getting the above errors, then simply follow the below steps.

Select Tools > NuGet Package Manager > Package Manager Console. Once the Package Manager Console window is open, simply type dotnet restore and press enter button as shown in the below image.

Once the restore successful, then again run the projects. At this time you may get the following error.

We will discuss why this error and how to resolve this error in detail in our upcoming articles. But, now let us solve this error in another way. Right-click on the BlazorServerApp project and select the properties option from the context menu. From the project properties window, select the Debug tab from the left pane and from the launch drop-down list, select the Project option, and save the changes.

Now run the projects and you should see both the projects are up and running.

Blazor Server APP:

Blazor WebAssembly APP:

Note: The Blazor Server App template is used to create a blazor application with a server-side hosting model whereas the Blazor WebAssembly template is used to create a blazor application with the client-side hosting model.

So, with Blazor we have two hosting models. One is Blazor WebAssembly (i.e. Client-side hosting model) and the other one is Blazor Server (i.e. Server-side hosting model).

In the next article, we will discuss the Blazor Hosting Models in detail. Here, in this article, I try to explain how to create a Blazor application using Visual Studio 2019 step by step and I hope you enjoy this article.

Summary:
I hope this post will be helpful to understand How to Create Blazor App in Visual Studio 2019
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉

Read More

Environment Setup for Blazor App Development

In this article, I am going to show you the Environment Setup for Blazor App Development Setup Step by Step. Please read our previous article where we gave a brief introduction to Blazor. At the end of this article, you will understand the software and tools required for Blazor application Development.

Environment Setup for Blazor App Development:
In your local machine, to set up blazor, you need two things i.e. .NET Core SDK 3.1 or later and IDE (Integrated Development Environment).

Install .Net Core SDK 3.1 or later:
First, you need to install .NET Core SDK 3.1 or any later version. In order to verify whether the .NET Core SDK is installed on your machine or not, type the dotnet –list-sdks command in the command prompt and press enter as shown in the below image.

As you can see in the above image, in my machine, there are five different versions of .NET Core SDKs are installed. If you further notice .NET Core SDK 3.1.300 is also installed which is the latest version at this moment.

If you have installed .NET Core SDK, then please install it from the following URL.

https://dotnet.microsoft.com/download/

Once you navigate to the above URL, just click on the Download .NET Core SDK option as shown in the below image.

Integrated Development Environment (IDE) for Blazor App Development:
You can use any of the following IDEs to develop the Blazor app.

1. Visual Studio 2019
2. Visual Studio Code
3. .Net Core CLI

We will show all the above options to develop the Blazor app. But from the beginning, we are going to use Visual Studio 2019 as the IDE for Blazor app development. If you have not installed Visual Studio 2019, then please download and installed Visual From the below URL.

https://visualstudio.microsoft.com/downloads/

Once you navigate to the above URL, and if you are a student and you just want to learn Blazor, then I recommended you choose the Community edition of Visual Studio 2019 as shown in the below image which has the most all the feature the enterprise edition has.

While installing Visual Studio, please make sure ASP.NET and Web development workload is installed. To verify this, whether you have installed this workload or not, open Visual Studio 2019, then just click on Tools and select Get Tools and Features option from the context menu.

In the next article, I am going to show you how to create blazor app in Visual Studio 2019 step by step. Here, in this article, I explain the Environment Setup for Blazor Development.

Summary:
I hope this post will be helpful to understand how to set up local Environment for Blazor App Development
Please share this post with your friends and colleagues.
For any queries please post a comment below.
Happy Coding 😉

Read More