Blazor Introduction

This blog post might be outdated one day in the future but my intention here to get through the first bits of Blazor even at its alpha release.

What is Blazor?

Blazor is an experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

What is WebAssembly?

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

WebAssembly 1.0 has shipped in 4 major browser engines.

I am using Visual Studio 17.5 Preview 2.0. I installed ASP.NET Core Blazor Language Services which is an extension that provides Visual Studio support for ASP.NET Core Blazor. I am using the version 0.1.0 of Blazor which is the first alpha-quality release.

Let's create a new vanilla Blazor (ASP.NET Core hosted). The template is available for ASP.NET Core 2.0 at the moment of writing this blog post.

Visual Studio generates a solution WebApplication1 in our case, made up of 3 projects :

  • WebApplication1.Client
  • WebApplication1.Server
  • WebApplication1.Shared

Note here that the WebApplication1.Server is the Startup Project. It contains the Startup class.

In the Configure method of Startup class, we use a specific middleware UseBlazor to startup the Blazor Client project at the end on the main pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseMvc(routes =>
    {
        routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");
    });

    app.UseBlazor<Client.Program>();
}

Let's go to declaration of the Blazor middleware. It is defined under the "Microsoft.AspNetCore.Builder" namespace.

namespace Microsoft.AspNetCore.Builder
{
    public static class BlazorAppBuilderExtensions
    {
        public static void UseBlazor<TProgram>(this IApplicationBuilder applicationBuilder);
        public static void UseBlazor(this IApplicationBuilder applicationBuilder, BlazorOptions options);
    }
}

If we open the wwwroot folder, we will find an html file. It main role is to bootstrap the Blazor Client project. The important line of the all this html stuff is line #14 as highlighted just below :

<!DOCTYPE html>  
<html>
<head>
    <meta charset="utf-8" />
    <title>WebApplication1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>

    <script src="css/bootstrap/bootstrap-native.min.js"></script>
    <script type="blazor-boot"></script>
</body>
</html>

Let's do an F5 to run the app :

Let's now do an F12 on your favorite browser and go to Network tab in order to see the downloaded files.

The current version of Blazor is not ready yet for production for 3 main reasons at least :

  • No debugging
  • .NET Standard incomplete for multithreading
  • Validation and Forms are not yet implemented
Blazor WebAssembly