Introduction to Blazor | Blazor Tutorial
Blazor .NET Core .NET

Introduction to Blazor | Blazor Tutorial

Mishel Shaji
Mishel Shaji

Introduction to Blazor

Blazor is an Open Source, single-page web application development framework developed by Microsoft. Unlike other frameworks like Angular, React, and VueJs, Blazor allows you to write and run C# code in web browsers through web assembly.

You can download the source code of this project from GitHub and use it as a reference.

geekinsta/BlazorApp
App to learn Blazor. Contribute to geekinsta/BlazorApp development by creating an account on GitHub.

To track changes, see this commit.

Hosting models

Blazor apps can be hosted in two different ways.

  1. Client-side Web Assembly.
  2. Server-side ASP .NET Core hosted.

Now you might be wondering, what are there things? How are they different. Lets find the answer.

Client-side Web Assembly Hosting model

According to the documentation, a client-side web assembly Blazor app runs in the browser similar to other frameworks like Angular, React, and Vue Js. When a user requests a web page or your web application, the entire code related to the client-side logic is downloaded. All dependencies and runtime required to run the application will also be downloaded.

This allows us to use the application even if the app goes offline and syncs the changes later.

Benafits

  • Can even work offline.
  • Can utilize serveries deployment.
  • Faster in challenging network conditions.
  • All events created by the user are handled on the client side itself instead of sending it to a web server. This will reduce the server load.

Drawbacks

  • The entire application and its will be downloaded to the end device. Therefore, the initial loading time will be higher that the server side hosted model.
  • Limited to the capabilities of the client device.

Server-side ASP .NET Core hosted Hosting model

If we choose the Server Side hosting model, the Blazor app will run on the server. Every change or events that occurred at the client side is sent to the server via SignalR communication. The server will then process the events or changes and update client-side UI if necessary. This means that the UI rendering will occur at the server-side.

Benafits

  • Initial loading will be faster.
  • Requires a network connection to work.
  • Need a server that can host your .NET Core application.
  • Can utilize the capabilities of a web server.
  • Good for SEO as the result is processed on the server-side.

Drawbacks

  • No good in bad network conditions.
  • As the number of users increases, you have to scale the hosting.
  • Users far from the server location may experience small delays in processing their requests.

Which hosting model should you choose

Choosing a hosting model depends on the application. Choose Blazor server-side app if your app is too complex and SEO is your paramount. If the app is small and needs the capability to run offline, choose Blazor Web assembly.

Prerequisites

Before continuing, please make sure that you have installed Visual Studio 2019. If you are using a Linux machine, install Visual Studio Code.

Next, we should install the latest version of .NET Core SDK. If you are new to .NET Core SDK, it is a tool that allows developers to create .NET applications and libraries.

The latest version of .NET Core SDK can be downloaded from here. After installing .NET SDK, run the following command to validate the installation.

dotnet --info

If .NET SDK is installed properly on your computer, you will get an output similar to this:

If the .NET SDK is not installed properly, you may get an error like this.

'dotnet' is not recognized as an internal or external command

Create a Blazor project

Step 1: Now, let’s create our first Blazor Application. To create the app, open Visual Studio, select Blazor app from the project template, and click Next.

Blazor project template

Step 2: Give a name for the project. Here, I am naming the project as BlazorApp.

Blazor project configurations

You can also pick a location to save the project. Click Create to continue.

In this page, you can select the hosting model of your Blazor App. You can learn more about Blazor hosting models from here.

First, we’ll be working with Blazor Web Assembly. So, select Blazor web assembly as the hosting model. Also, make sure that you have selected Configure for HTTPS, and ASP .NET Core Hosted.

Blazor hosting models

Click Create to create the project.

Project Structure

Visual Studio will now create a Blazor project. Before continuing, let us take a look at the project structure of our Blazor application. You can run the project to see a demo app created for you.

Blazor project structure

In the Solution Explorer, we’ll have three projects.

  • BlazorApp.Client
  • BlazorApp.Server
  • BlazorApp.Shared

BlazorApp.Client

The name itself is self explanatory. The BlazorApp.Client is the project that deals with the client side logic. Anything you write in this project will be sent to the sent to the browser and will be executed there.

BlazorApp.Server

This application will not be sent directly to the client. This project is performing server-side activities. For example, this project can be used to build an API for the application.

BlazorApp.Shared

This project holds the common or shared elements. For example, this project can be used to define the models used in the client-side and server-side app.

Files and folders

Now let us get familiarized with the important files and folders of the project.

wwwroot

This folder holds all static files like CSS, images, icons, fonts etc. used by the application.

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

This folder is used to store the shared or reusable components. For example, you can store the NavBar of the project in this folder because it is a shared component that you’ll be using on multiple pages.

Program.cs

This is the entry point of our application. It contains the Main method that is executed first when the app runs.

In a Blazor server project, the Main() method calls CreateHostBuilder() method which sets up the ASP.NET Core host. In a Blazor client-side project, the Program.cs file will be in the <app-name>.server project.

App.razor

This is the root or base component of the application and contains the routing mechanism of the client-side application. It captures the requested URL and renders the page. If the page os not found, a message saying Sorry, there’s nothing at this address. will be displayed

MainLayout component (MainLayout.razor)

The application’s main layout component.

This is the default Navigation bar template of the Blazor application.

_Imports.razor

This is similar to _ViewImports.cshtml file in an asp.net core MVC project. This file holds the references to commonly used classes and namespaces so that you don’t have to import that chasses in each component or page.

wwwroot/index.html

It is the root page of our application and contains all tags such as HTML, HEAD, BODY, etc that are common for all pages. It is responsible for loading the required scripts (_framework/blazor.webassembly.js) to run the application.

Startup.cs

This file contains the project’s startup logic. The DI model and middlewares are configured here. In a Blazor Web Assembly app, you will see this file in both setver-side and client-side projects.

ConfigureServices – The ConfigureServices method can be used to configure the built-in dependency container of the framework.

Configure – Configures the app’s request processing pipeline. Here, we can declare the middlewares of our application.

You can learn more about the startup.cs file from here.

appsettings.json (Blazor Server)

As the name indicates, this file is used to store the project settings and configurations. For example, you can store the database connection string in this file. In classic ASP .NET Web Form Apps and MVC apps, we used web.config instead of appsettings.json. This is the default content of appsettings.json.

{
  "Logging": {
      "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
      }
    },
"AllowedHosts": "*"
}

What’s next?

In the next post, we’ll learn about components and create a component to display a list of movies.