27th Jan 2020

Blazor with .NET Core

.NET

Written By, Akash Limbani

Overview

Blazor, what’s that? Blazor is something new in the world of Microsoft Programming Technology. Stay with us till the end of the blog to know about the trending tech “Blazor” and also to take the first steps towards development with Blazor. Let’s begin.

What is Blazor?

Microsoft has recently announced the release of .NET web framework Blazor.
Blazor is :

  • Free
  • OpenSource

Blazor is a web framework used to build an application using c# that runs in the browser.
Blazor is an HTML framework like Angular, React, and Vue. It is used for rendering .NET on client-side and runs under WebAssembly.

For a long time, Javascript(and it’s child frameworks) have used DOM(Document Object Model) to run in the browser.But the scenario has changed since Web Assembly’s introduction. It allows compiled language to be interpreted on the client-side, and it’s supported across all the browsers now.
blazor
It is a game-changer in Web Technology. Because Blazor works with WebAssembly.
blazor-web-assembly
WebAssembly changes the Game

Many resources are available for WebAssembly, like

So Microsoft had a brilliant idea, the creation of Blazor. Allowing a C# developer to build an entire stack in .NET, including UI, was an exciting concept. For some time, Blazor was in preview but is now included as a general release on September 23, 2019, along with the next iteration of .NET Core 3.0.

blazor-preview

Architecture of Blazor

blazor-architecture
So, now we need to build with Blazor and ASP.NET Core 3.0. First, you need to have the following installed, and you’re ready to go.

Build a Website with .NET Core 3.0 and Blazor

Now that everything you need for development is ready, let’s get acquainted with what it takes to create a primary simple website with Blazor.

There are two ways you can make use of this technology:

  1. Client-side Blazor
  2. Server-side Blazor

For this example, the Server-side option is the great preference for stability, as Client-side Blazor is still very new.

First, you need to create a Blazor project. To get the latest templates to work with Visual Studio 2019 or Visual Studio Code, directly install them from the Command Prompt/ Terminal from your base repository directory.

Visual Studio 2019(16.3 or later) will detect that the templates have been installed and surface them to you without the need for any additional extensions. Now It’s time to create a new project.

From the parent directory of code repositories, execute the below command.

Now that everything has loaded up, return to your command line/terminal, and run the project.

Launch your favorite browser and navigate to https://localhost:5001. You should see a website with a template.

blazor-localhost

Stay Tuned,
In the next blog, We will show you how to host and deploy the Blazor app on a Linux server and Windows server.

Written By,

.Net developer at Yudiz Solutions Pvt. Ltd