Develop Cross Platform Desktop App with Blazor and Electron.NET

System: macOS Big Sur 11.6
Dotnet: 5

Install Electron.NET CLI Tool

First, we need to install the Electron.NET tool.

bash

dotnet tool install ElectronNET.CLI -g

Initialize a Blazor Server Project

Then, we initialize a Blazor Server project named example-app.

bash

dotnet new blazorserver -o example-app --no-https

Also, we use a tool called electronize to setup Electron related settings.

bash

cd ./ExampleApp && electronize init

Run Blazor Server with Electron

To make the server run together with Electron, we need to install the ElectronNET.API package and make some necessary code change:

Program.cs

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

Startup.cs

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

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

Start the Development

Now, we can start the project with file watcher.

bash

electronize start /watch

Develop Cross Platform Desktop App with Blazor and Electron.NET

Install Electron.NET CLI Tool

Initialize a Blazor Server Project

Run Blazor Server with Electron

Program.cs

Startup.cs

Start the Development

References

COMMAND INTERFACE

:help aguang.xyz