This is one of several articles on Blazor I’ll be writing, all so engineers can get familiar with the capabilities and tricks of this burgeoning and exciting web technology

So you’ve started building a web app using Blazor, but you realise it’ll likely be better suited as a desktop app. That’s fair. Some apps just don’t lend themselves to web stuff. You want a tray icon; you want your app to run offline. There are any number of reasons you might want your app to run on a local workstation than in the cloud.

So what’s a developer to do? Well, Microsoft has all kinds of big plans with .NET Maui a cross-platform app development framework which will apparently link all the varied OS (including mobile) together under a grand unified field theory of app development.

However, at this point, .NET Maui is in early preview, so maybe you’re not ready to leap on that unproven bandwagon. After all, Microsoft projects are notorious for slipping deadlines and for .0 versions to be buggy as a college dorm mattress. Maybe you need something a big more stable, with a lot of bells and whistles ready to go.

So like so many devs, you turn your attention to the cross-platform app dev framework Electron.

After all, Electron lets you build OS native desktop apps using nodeJS / Javascript and has been doing so for a while now. Lots of desktop apps out in the wild are built on Electron, including the ubiquitous code editor of choice for so many VS Code.

Why Electron Isn’t For Everyone

I can’t speak for all devs, but I’m not the hugest fast of Javascript or better put nodeJS. I find the scaffolding buggy and sloppy, the package management bloated, and the complete anarchy of packages in the wild more than a bit unnerving.

Javascript syntax is loose, and while some love this, it makes my skin itch. I can code in it, but that doesn’t mean I love it. I definitely prefer a more structured language, especially one with such great OO and powerful syntactical features like .NET. If I’m screwing about, sure, I’ll accept some level of loosey-goosey, but when it comes to production code, I want the rigour and structure of a more formalised language.

Don’t get me wrong. I’m not saying one is better than the other. I’m saying one is better for ME. I personally prefer .NET. If someone loves Javascript to the point of slavering devotion, more power to ’em. I’m just saying I prefer .NET and its structures. I see the definite power of Javascript; I just prefer to temper it with the structure of C#.

I became a .NET engineer for a reason, and that’s where I’m happiest when doing development. Like I said, I can do Javascript dev, but I prefer to limit it as much as possible. With Blazor, I can do exactly that: Deal with the minimal Javascript and use the JSInterop in Blazor to connect the dots.

So I want a desktop app and I want to use .NET. Where do I go from here?

Introducing Electron.NET: .NET Bindings for Electron

We’re in luck. The Open Source world to the rescue once more with Electron.NET

Electron.NET is a wrapper around a “normal” Electron application with an embedded ASP.NET Core application. Via the Electron.NET IPC bridge, we can invoke Electron APIs from .NET.

As Electron exposes a pretty sizeable set of APIs there is a lot for you to work with, especially when it comes to standard desktop app stuff. Dialog windows, crash reporting, notifications, tray app functionality, auto-update logic, all good stuff when building an app.

All of this is automatically available from Electron back into Electron.NET via the IPC bridge (also known as the BridgeConnector).

Getting stuck in with Electron.NET in a Blazor App

The README in the Electron.NET GitHub repo says it all, but I’m going to take you through it so you can see how easy it is to go from a web app to a desktop app in just a few lines of code.

All the code I’m showing off here you can pull down from my GitHub repo.

I’m going to skip the part where we create a Blazor server app (we’ve done that before) and get stuck right into the Electron.Net stuff.

I’ll point out that at the time of this writing, there are some issues getting an Electron.NET app running on WSL2. For now, as you follow along, we’ll be doing this from a Windows or Mac command prompt.

Prerequisites: NodeJS

It should go without saying you need NodeJS to build and run your Electron.NET app, since Electron is based on NodeJS. Our Blazor app is running in a subsystem inside Electron with C# wrappers to access Electron’s Javascript APIs. More than likely you already have NodeJS, but if not

Prerequisites: Electron.Net CLI

Like Electron, Electron.NET comes with a wee CLI to help you get your Blazor app “Electronised”. You can pull this here

dotnet tool install ElectronNET.CLI -g

Code Changes to our Blazor App

Next, we need to navigate to our Blazor server project and do a couple things.

Add the Electron.NET package to our project

Install-Package ElectronNET.API

Open your Program.cs and add the following line

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

Open your Startup.cs and add the following entries.

Your Configure method

using ElectronNET.API;public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    //rest of your Configure method

// Open the Electron-Window here
    Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}

To add the ElectronNET.Api classes to your DI container, you need to register them in your ConfigureServices method

using ElectronNET.API;

public void ConfigureServices(IServiceCollection services)
{
    //rest of your ConfigureServices method    services.AddElectron();
}

Hybrid Mode: Building your Blazor App for both Web and Electron

It is 100% possible for you to build your app to be both a web app AND a Blazor app as the team at Electron.NET have catered for this very scenario.

In order to do so, you need to wrap any/all calls (including the calls above in the Configure and ConfigureServices) to Electron functionality in a simple if statement.

if (HybridSupport.IsElectronActive)  
{ 
  // electron-specific functionality  
}

Firing up our app

So now for the fun. Navigate to your command prompt, and let’s fire up our Blazor App in Electon.

First time out the gate, you need to run the following command in the same directory as your project file

electronize init

This will add some electron / node files to your project directory and some references inside your csproj file.

Now let’s fire up our app (first time is a wee bit slow. After that, it’s quick enough)

electronize start

And voila!

Wrapping up and where to from here

As you can see, it’s super easy to convert your Blazor app to an Electron app with very little effort. In a future post, I’ll take you through interacting with the Electron.NET APIs, and how you can extend these yourself to include additional Electron functionality.

For now, hopefully this gives you something to mess with.

Hope this helps and happy coding.