As a Web developer, I was looking for leveraging my skills (C#, Razor, .NET) to
write fast and cross-platform desktop apps.

You can be ambitious for speed if you discover Electronjs technology that outperforms desktop technologies on Windows such as WPF and WinForms. You notice that performance if you use Visual Studio Code the most popular code editor in the world.

Electronjs performance may be attributed to its chemistry. More than half of the source code base is written in C++. The framework is a great combination of Nodejs and Chromium technologies.

I have to use Javascript, HTML, and CSS to build cross-platform Desktop Apps using Electronjs framework. But, I prefer C#. The first good news is Blazor is now an official and supported Microsoft product.

Blazor is a single-page app framework for building client-side web apps using .NET and WebAssembly. The second good news is the Electron.NET library which is a wrapper around a "normal" Electron application with an embedded ASP.NET Core application.

Community

The current version is 5.22.12 (5=Electron version, 22=.NET Core 2.2). The authors of the library are 2 awesome Microsoft MVPs (Most Valuable Professionals) : Gregor Biswanger and Robert Muehsig. The community behind it is really awesome. It is also growing. You can engage with it using the Gitter channel.

Gitter

During //Build, the Blazing Pizza was presented by Daniel Roth and I decided to transform it into a Desktop App.

Prerequisites

I used the following frameworks and tools to build and run the BlazingPizza solution from the Blazor workshop:

  • Visual Studio 2019 Version 16.2 Preview 1
  • .NET Core 3 Preview 5 SDK
  • Nodejs 10.15.3
  • Blazor 3.0.0-preview5-19227-01
  • ElectronNET.API 5.22.12
  • ElectronNET.CLI 5.22.12

Configure

You should add the ElectronNET.API NuGet package to the BlazingPizza.Server project.

<PackageReference Include="ElectronNET.API" Version="5.22.12" />

In Program.cs, I added the extension method UseElectron(args) to the CreateHostBuilder method.

...
public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)                
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseElectron(args).UseStartup<Startup>();
                });                
...

In Startup.cs, you should add the following line of code as the last statement in the Configure method in order to bootstrap Electron Desktop GUI.

Electron.WindowManager.CreateWindowAsync();

Init

That's all for the code now. The next step is to use the tooling to launch the App. But, you have to install the tooling first using the following command:

dotnet tool install ElectronNET.CLI -g

Before running the App for the first time, you need an Electron.NET project initialization. Type the following command in your BlazingPizza.Server folder:

electronize init

The following electron.manifest.json file is generated.

{
  "executable": "BlazingPizza.Server"
}

The "Electron.NET App" profile is created inside the launchSettings.json file.

...
  "profiles": {
    "Electron.NET App": {
      "commandName": "Executable",
      "executablePath": "C:\\Program Files\\dotnet\\dotnet.exe",
      "commandLineArgs": "electronize start"
    },
...

The BlazingPizza.Server.csproj is also updated with the following ItemGroup:

...
<ItemGroup>
    <Content Update="electron.manifest.json">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </Content>
  </ItemGroup>
...

Run

Before running the app, make sure to comment the Twitter authentification middleware located in the ConfigureService method otherwise you need to configure the Twitter authentication as detailed in the documentation.

.AddTwitter(twitterOptions =>
{
	twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];
	twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
	twitterOptions.Events.OnRemoteFailure = (context) =>
	{
		context.HandleResponse();
		return context.Response.WriteAsync("<script>window.close();</script>");
	};
});

To run the app, you have to execute the following command:

electronize start

You get the following desktop app with the same features:

The Electron.NET library is used by more than 160 OSS projects in GitHub. Among them,
you can find Attack Surface Analyzer which is a Microsoft OSS project that uses the Electron.NET library. This tool can help you analyze your operating system's security configuration for changes during software installation.

Conlusion

I transformed the Blazing Pizza application from a Blazor Web App to a cross-platform Desktop App thanks to the library Electron.NET and the tooling provided by the ElectronNET.CLI.