Creating Desktop Application using Blazor and Electron

6 Sep 20233 minutes to read

This section explains how to create and run desktop applications using Blazor and Electron Framework with Syncfusion Blazor components.

What is Electron?

Electron framework for building cross-platform desktop applications with web technologies. It utilizes Node.js and the Chromium rendering engine to run a web application on a desktop shell.

Create a Blazor server-side application

You can create Blazor Server application using either CLI or Visual Studio referring the below links

• Create Blazor server application using CLI

• Create Blazor Server application using Visual Studio

Configure Electron in Blazor App

You can run the below commands either in Visual Studio Developer Command Prompt or CLI based on the tool you are using for development.

1.Install ElectronNET.API NuGet package in the application.

dotnet add package ElectronNET.API

2.Create a local .NET tool manifest file by running the following command. This will create a manifest file in the ~/.config/dotnet-tools.json location.

dotnet new tool-manifest

3.Install the electronize tool locally in the project by running the below command.

dotnet tool install ElectronNET.CLI

4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application.

dotnet electronize init

5.To integrate Electron.NET in the application add the below code in ~/Program.cs file of the application.

.NET 6 & .NET 7 (~/Program.cs)

using Syncfusion.Blazor;
using ElectronNET.API;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
...
builder.Services.AddSyncfusionBlazor();
builder.Services.AddElectron();
builder.WebHost.UseElectron(args);

var app = builder.Build();
....

6.To open the Electron window add the below code in the ~/Program.cs file of .NET 6 and .NET 7 applications.

.NET 6 & .NET 7 (~/Program.cs)

using ElectronNET.API;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
...
builder.WebHost.UseElectron(args);

if (HybridSupport.IsElectronActive)
{
    // Open the Electron-Window here
    Task.Run(async () => {
        var window = await Electron.WindowManager.CreateWindowAsync();
    });
}

var app = builder.Build();
....

7.Run the application using the below command.

dotnet electronize start

NOTE

To close the electron app when closed the electron window add the below code in //Open the Electron-Window in step 6 in the ~/Program.cs file of .NET 6 and .NET 7 applications.

.NET 6 & .NET 7 (~/Program.cs)

using ElectronNET.API;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
...
builder.WebHost.UseElectron(args);

if (HybridSupport.IsElectronActive)
{
    // Open the Electron-Window
    Task.Run(async () => {
        var window = await Electron.WindowManager.CreateWindowAsync();
        window.OnClosed += () => {
            Electron.App.Quit();
        };
    });
}

var app = builder.Build();
....

8.Run the below command lines to do production builds based on platform

dotnet electronize build /target win
dotnet electronize build /target osx
dotnet electronize build /target linux

NOTE

View the complete Blazor Server electron application with Syncfusion controls on GitHub