Electron.NET + ASP.NET Core Blazor でクライアントアプリをつくる

※ これは 2019/11/15 .NET Core 3.1.0 preview3 時点の情報です

最新版では動作が異なる可能性がありますのでご注意ください

静的な HTML として Blazor WebAssembly を実行できましたが、もっとクライアントアプリっぽく動かす方法があるようなのでお試し

スポンサードリンク

その方法というのは、Web アプリサーバー用の ASP.NET Core Blazor で Electron.NET というライブラリを利用することで Electron のクライアントアプリにしてしまうという方法！

その前に NET Core 3.1 の preview3 がリリースされていたようなのでいろいろアップデート

まずは下記サイトから SDK インストールし直し

dotnet.microsoft.com

Windows 64bit の Installer のリンクからダウンロードしてインストールしました

f:id:matatabi_ux:20191115202406p:plain — .NET Core 3.1 preview3

次にコマンドプロンプトからコマンドをたたいて SDK に合った Blazor テンプレートをインストール

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview3.19555.2

あとで使うので Electron.NET のコマンドラインツールもインストール

dotnet tool install ElectronNet.CLI -g

ここまで出来たら ASP.NET Core Blazor のプロジェクトを作成します

VSCode で適当なディレクトリを開き、ターミナルから下記のコマンドを順次入力

dotnet new blazorserver -o SPA
cd SPA
dotnet add package ElectronNet.API

これで ASP.NET Core Blazor のプロジェクト SPA が生成され、Electron.NET のライブラリがインストールされました

SPA プロジェクトの Program.cs を修正

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using ElectronNET.API; // 追加
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;

namespace SPA
{
    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 System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ElectronNET.API; // 追加
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SPA.Data;

namespace SPA
{
    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)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

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

            Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); // 追加
        }
    }
}