A Quick Look at Blazor

In February of this year, Steve Sanderson and Daniel Roth of the ASP.NET team announced that the experimental web UI framework Blazor had moved into the ASP.NET organisation.

But what is Blazor?

Daniel Roth describes Blazor as:

[A]n experimental web UI framework based on C#, Razor, and HTML that runs in the browser via WebAssembly. Blazor promises to greatly simplify the task of building fast and beautiful single-page applications that run in any browser. It does this by enabling developers to write .NET-based web apps that run client-side in web browsers using open web standards.

This ambitious project would enable full stack development within the world of .NET, allowing developers to use languages such as C# and F# alongside the Razor syntax and existing web technologies such as HTML and CSS to create rich web apps without JavaScript.

Because Blazor is in its experimental stages, it is not a product to be used in production. The ASP.NET team are currently engaging with early adopters and soliciting their feedback and suggestions on Blazor.

If you want to get involved in that conversation, the Blazor GitHub repo can be found here.

Let's take a quick look at getting set up with a working Blazor project.

Creating you first Blazor project

Before you start, you’ll need .NET Core SDK 2.1.300-rc1 installed to follow along. You’ll also need Visual Studio 2017 (15.7 Preview 5 or later) to be able to run the Blazor project in Visual Studio.

As well as that, you’ll need to install the official Blazor template using the .NET Core command-line interface (CLI).

Next, open a PowerShell window and type the following command:

This should present you with a set of options that you can use with the dotnet new command. It will also show which templates you have installed:

As you can see above, you should have templates for ASP.NET Core Web API, Angular, React and so on, but no template option for Blazor.

Now run the following command:

This triggers the .NET Core CLI to download the Blazor templates. At the end of the install you can see Blazor in your template list:

With the Blazor project templates installed, you can go ahead with creating you Blazor project.

Use the Blazor (hosted in ASP.NET server) Template to create the project by running the following command:

The .NET Core Cli has now created your first Blazor project!

Let’s take a look at the projects that have been created:

You now have three projects as part of your Blazor solution. Firstly, you have the BlazorApp.Client project which is an ASP.NET Core Blazor Project. You then have the  BlazorApp.Server project, which is an ASP.NET Core Web API Project. Lastly you have the BlazorApp.Shared project, which is a .NET Standard 2.0 project for sharing code across the server and client projects.

Running your first Blazor project

If you have Visual Studio 2017 (15.7 Preview 5 or later) installed you can open the solution and run the BlazorApp.Server project.

If you want to continue using the .NET Core CLI, you’ll need to run the following command in the BlazorApp folder:

Once you've built your project and started running it, you should be able to see the following in you web browser:

Congratulations! You’ve now got your first Blazor app up and running!

Summary

Blazor is an experimental web UI framework still in its early stages of development and tooling. I encourage you to get involved in helping to shape the future of this framework by visiting the Blazor GitHub.

If you’d like a deeper technical dive explaining how Blazor works, take a look at Steve Sanderson’s blog post: Blazor: a technical introduction.

Resources

Blazor.net
Blazor: a technical introduction
Steve Sanderson Twitter
Daniel Roth Twitter
ASP.NET Blog - A new experiment: Browser-based web apps with .NET and Blazor