Help us understand the problem. What is going on with this article?

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

※本記事は私のBlogに書いたものの焼きまわしです。

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.csStartup.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

2019-09-27-21-57-55.png

おぉ~

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

おわり

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

以上です。

piyosi
小鳥とMicrosoft <3 なエンジニア。 モダンな環境で働きたい!
https://blog.piyosi.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした