.NET Core 3.0のBlazor + ElectronでGUIアプリ開発

Electron.NETを使って.NET Core 3.0のBlazorをElectron上で動かしてみました

環境

今回の環境はこちら

• .NET Core 3.0.100
• Nodejs 12.10.0
• ElectronNET.API 5.22.14
• ElectronNET.CLI 5.22.14

作成手順

以下のコマンドでBlazorのプロジェクトを作成します。
プロジェクトにElectronNET.APIのPackageを追加します。

dotnet new blazorserver -o BlazorOnElectron
cd BlazorOnElectron
dotnet add package ElectronNET.API

Program.csとStartup.csに2行ずつ追加します。

Program.cs

using System;
// 途中省略
+ using ElectronNET.API;

namespace BlazorOnElectron
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

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

Startup.cs

using System;
// 途中省略
+ using ElectronNET.API;

namespace BlazorOnElectron
{
    public class Startup
    {
        // 途中省略

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            // 途中省略

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });

+           Electron.WindowManager.CreateWindowAsync();
        }
    }
}

ElectronNET.CLIをインストールします。
インストール後、initコマンドで初期化を行います。

dotnet tool install ElectronNET.CLI -g
electronize init

初期化が完了するとelectron.manifest.jsonが生成されるのと、
Properties\launchSettings.jsonに起動用Profileの設定が追加されます。

以下のコマンドで起動します。

electronize start

起動画面

おぉ～

electronize build /target winでビルドしてみるとresources\bin以下にBlazor一式が入る感じなんですね。

おわり

Electron + Blazorってかなり尖ってますね。。

以上です。