08
- June
2020
Posted By : Rahul
Getting Started with ASP.NET Core Blazor

Before explaining about anything about the Blazor, I would like to say just one word about Blazor.

Running .NET in browser just like JavaScript

Surprised??  Don’t worry, I will help you to understand “How .NET runs in browser just like JavaScript runs?” Now let’s understand it in detail.


What is WebAssembly?

Before going into detail about Blazor, It is necessary to understand about WebAssembly. Didn’t hear about WebAssembly earlier? Check out this developer reference document here.

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.

In a nutshell, WebAssembly is a web-standard which is now supported by all major browsers including mobile devices (check on CanIUse). It provides a way to run code written in multiple high level languages in the browsers at near native speed, with client apps running in the browsers that earlier couldn’t done have so.

What is Blazor?

Blazor is an open-source framework for building interactive client-side web apps using .NET. Yes, using C#, not JavaScript. You can develop Blazor application using C#, Blazor & HTML that runs on client-side. This application will download .Net DLLs on browser (just like JavaScript files we see in network tab) and execute them using a .Net runtime called MONO developed using WebAssembly. Interesting part is, no extra plugin, no Silverlight, no extra tool, even no add-on required to run Blazor application in the browser. Blazor uses only latest web standard “WebAssembly” to make it happen. It gives you all the benefits of a rich, modern single-page application (SPA) platform including sharing code across server and client. 

As a quick history about Blazor was started as a personal project by Steve Sanderson while working in Microsoft. Later Microsoft add Blazor to its Asp.Net GitHub organisation as an experimental project.


Creating a new Blazor Project

To get started with Blazor development, follow the below instructions –

In case using Visual Studio

Install latest version of Visual Studio 2019 (currently Visual Studio 2019 v16.6) and make sure to check ASP.NET and Web Development workload.

In case using Visual Studio Code

Default Blazor templates come with .NET SDK 3.1.300 and above.


To create your first Blazor app using Visual Studio 2019 –

  • Select File -> New -> Project
  • Make sure to select C# (from the top dropdown) and Search “Blazor” in “Search for templates” box or pressing Ctrl+S
  • Select BlazorApp from the list and Press the Next button.
create-blazor-project-using-VS2019
  • In next window, type your Project Name “FirstBlazorApp” in my case.
  • Select your project location to save
  • Give the solution name or check “Place solution and project in same directory” and click on “Create” button.
configure-new-project-blazor
  • In the next window, there are two options to select. There are two hosting models of Blazor framework. We will see both models in details later. For this time, lets understand both of them in one line.

Blazor Server App – A server application template that runs server-side inside an ASP.NET Core app and handles user interactions over a SingnalR connection.

Blazor WebAssembly App – A client application that runs on WebAssembly using Mono .NET runtime.

  • Select Blazor WebAssembly App and click on Create button. And now your application is ready to launch in browser.
blazor-web-assembly-app

Blazor WebAssemly App is a stand-alone project that runs on WebAssembly entirely in client browsers. There is no backing ASP.NET Core API with this app until you don’t select “ASP.NET Core hosted” option (shown in above image)

Here is your first Blazor WebAssembly app folder structure and files.

blazor-wasm-folder-structure
  • Press Ctrl + F5 to run the app without debugging.
blazor-wasm-output

Congratulations ! Your first Blazor WebAssembly app is launched to browser .


To create your first Blazor app using VS Code (.NET CLI) –

  • Open command prompt or terminal and go to the folder location to save your app.
  • To check .NET Core version installed on your machine, type following command –
check-dotnet-core-version
  • If you have not installed latest .NET Core SDK 3.1.300, please go to this link, download and install. If you have already installed, then create your Blazor server app using following command and press enter –
> dotnet new blazorserver --name <NameofYourProject>

Flags -:

blazorserver -: For just to let .NET CLI know that you are going to create Blazor server app.

–name -: Name of your project (In my case FirstBlazorServerApp)

create-new-blazor-project

Blazor Server App project template called “blazorserver” is for running Blazor on the server  inside an ASP.NET Core app and handles user interactions over a SingnalR connection.

To get all default templates using .NET CLI, run following command –

> dotnet new --help

Using help command, you can get both Blazor templates commands. In this article, we’re just going to create Blazor server app. If you want to create Blazor WebAssembly, you can use other command.

  • Navigate to your just created project folder and execute the following command to run your first Blazor server app –
> cd FirstBlazorServerApp
> dotnet run
run-app

Now you can access your first Blazor server app in the browser using the following URL – https://localhost:5001

blazor-server-app-runing

Congratulations ! Your first Blazor Server app is running in browser.

Summary

In this article, we have covered how to create our Blazor server or Blazor client app using either Visual Studio 2019 or using Visual Studio Code (via .NET CLI). Also, we saw how Blazor provides us two different types of hosting models. We will cover Blazor Components in our next article.

If you found this article helpful,

BMC logoBuy me a coffee


Follow Us For Latest Posts –

Comments

Leave a Reply