Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@piyosi

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

More than 1 year has passed since last update.

※本記事は私の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ってかなり尖ってますね。。

以上です。

12
Help us understand the problem. What is going on with this article?
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
piyosi
小鳥とMicrosoft <3 なエンジニア。 モダンな環境で働きたい!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?