Before explaining about anything about the Blazor, I would like to say just one word about Blazor.
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.
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?
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 –
- Install the latest .NET Core SDK (currently SDK 3.1.300) from here.
- Install the latest 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.
- 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.
- 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 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.
- Press Ctrl + F5 to run the app without debugging.
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 –
- 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>
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)
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
Now you can access your first Blazor server app in the browser using the following URL – https://localhost:5001
Congratulations ! Your first Blazor Server app is running in browser.
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,