C#: 나의 Blazor 웹앱을 Electron위에 올려보자

Mac, iOS, Android, Linux, Windows 등등..

우리는 수 많은 OS가 존재하는 세상에서 살고 있다.

당연하게도, 내가 만든 Appliccation이 최대한 다양한 환경에서 돌아갈 수 있었으면 좋겠다.

 

Flutter, Xamarin, MAUI, Electron, ReactNative 등등..

멀티 플랫폼을 지원하게 하기위한 기술들이 쏟아져 나오고 있다.

지금은 바야흐로 대 멀티 플랫폼의 시대.

 

수 많은 선택지 중 Blazor + Electron.NET을 이용해보기로 하였다.

(이미 Blazor를 이용한 웹앱을 만들어 본 경험이 있기 때문)

 

 

[ 사전 준비 ]

1. Blazor 웹앱을 만드는 방법은 공식문서에 다양한 튜토리얼이 있으므로, 그 과정은 생략함.

2. Blazor WebAssembly, Blazor Server 어떠한 프로젝트도 상관 없으나, 여기서는 Blazor Server 앱을 사용함.

3. Node와 .NET5 이상이 설치되어 있어야 함.

 

[ 시작 ]

1. 내 Blazor 프로젝트에 Electron.NET을 Nuget에서 설치.

 

2. Program.cs에 Electron 관련 코드 추가

using ElectronNET.API;

public static IHostBuilder CreateHostBuilder(string[] args)
{
    var builder = Host.CreateDefaultBuilder(args)
                      .ConfigureWebHostDefaults(webBuilder =>
                      {
                          // Electron
                          webBuilder.UseElectron(args);

                          webBuilder.UseStartup<Startup>();
                      });
    return builder;
}

 

3. Startup.cs에 Electron 관련 코드 추가

using ElectronNET.API;

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...
    ...
    ...
    
    // Electron
    if (HybridSupport.IsElectronActive)
    {
        CreateWindow();
    }
}

// Electron
private async void CreateWindow()
{
    var window = await Electron.WindowManager.CreateWindowAsync();
    window.OnReadyToShow += () =>
    {
        window.Show();
    };
    window.OnClosed += () => {
        Electron.App.Quit();
    };
    window.SetTitle("Blazor for Electron");
}

 

4. PowerShell을 이용한 ElectronNET.CLI 설치

dotnet tool install ElectronNET.CLI -g

 

5. VisualStudio에서 Terminal 추가

보기 메뉴 > 터미널 클릭

 

6. Terminal에서 ElectronNET.CLI 커맨드 입력

// 커맨드 위치를 솔루션 폴더에서 프로젝트 폴더로 이동
cd 프로젝트명

// 최초 한 번만 실행
electronize init

// Electron 실행
electronize start

 

7. 실행 화면

데스크탑 앱 화면

모바일 이라면 이런 느낌

 

8. 변경된 부분 살펴보기

1) 디버깅 시작 옵션에 Electron.NET App이 추가 되었음

해당 옵션을 선택 시 Eelctron으로 디버깅 시작

 

2) 프로젝트 속성 > 디버그 속성에 Electron.NET App이 추가 되었음

- 1)번과 동일한 내용이나, 우리가 Terminal에서 입력한 커맨드가 디버그 옵션으로 셋팅되어 있는걸 볼 수 있다.

electronize start 커맨드가 셋팅되어 있는 모습

 

9. Enjoy your Electron App !!