Blazor in Action

Authored by

This is not a title of ebook for Manning Editions but it's my personal experience for experementing Blazor.

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.

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 with 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.

Authored by

Maher Jendoubi

Husband and Dad. Medical Imaging and Radiation Therapy Project Manager @GustaveRoussy 🏥. Microsoft @MVPAward 🏆 on Developer Technologies.

Subscribe to Maher Jendoubi

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.