Create Desktop Application Using Blazor And Electron

In this tutorial, I will show you how to create desktop applications using blazor & electron step by step.

Introduction

Blazor is one of the most exciting technologies for web developers on the .NET stack and allows for building client/server-side web apps entirely in C#. Blazor isn't just for web apps though and has clear implications for desktop/mobile.

In this tutorial, I will show you how to create desktop applications using blazor & electron step by step.

• Tools: Visual Studio 2019, .Net Core 5.
• Note: You can also try .Net Core 3.1.

Let's start, First of all, we will create a blazor app.

Step 1

Go to NuGet package manager and install “ElectronNET.API” package to your application.

Step 2

You have to change your program.cs and startup.cs classes to ready your blazor application with electron as a desktop application.

Startup.cs

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
    } else {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints => {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
    Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}

Program.cs

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

Step 4

You have to install “Electron CLI” in your project. Go to your project folder then command prompt or command shell and write command  dotnet tool install --global ElectronNet.CLI and finally hit the enter key.

Step 5

Init your application using the cmd electronize init.

Step 6

Start your app using the cmd electronize start.

Source Code: https://gitlab.com/faisalcse1

Tutorial: https://youtu.be/7-zg7gPu4xM

Conclusion

Blazor is exciting and enables .NET web developers to build modern web apps with C#. Blazor apps can be effortlessly wrapped inside Electron to make compelling and consistent desktop solutions. However, modern webviews provide a lightweight alternative to Electron, thus minimizing the footprint of Blazor apps running on desktop.