Ionic5にCapacitorとElectronを導入し、デスクトップアプリとしてビルドする手順

Ionicプロジェクトの作成

Ionicプロジェクトを新規作成します。
作成時の選択項目は適当な物を選んでおきます。

$ ionic start my-project

プロジェクトのルートディレクトリに移動しておきます。

$ cd my-project

Capacitorのインストール

$ npm install --save @capacitor/cli @capacitor/core

Electronのインストール

$ npm install ngx-electron electron
$ npm install electron-packager --save-dev

アプリの初期設定

例としてアプリ名はexample、アプリIDはcom.example.appとします。

$ npx cap init example com.example.app

src/index.htmlの修正

後々、Electronアプリを起動した際にコンソールエラーが出てしまうので、src/index.htmlのbaseタグを下記のように修正します(スラッシュの前にドットを付ける)。

src/index.html

<base href="./" /> 

Electronアプリの起動

1. Ionicプロジェクトをbuildします。
2. CapacitorにElectronをプラットフォームとして追加します。
3. buildした中身(/www配下)をCapacitorにコピーします。
4. Electronアプリとして起動できます。

$ ionic build
$ npx cap add electron
$ npx cap copy
$ npx cap open electron

2回目以降のbuild時は、2.の手順「npx cap add electron」は省いてよいです。

Electronアプリのbuild

package.jsonの編集

package.jsonに下記を追記します。
アプリ名はExampleとします。

package.json

"scripts": {
 //中略
"electron:mac": "electron-packager ./electron Example --overwrite --platform=darwin --arch=x64 --prune=true --out=release-builds",
"electron:win": "electron-packager ./electron Example --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName='Example Electron App'"
}

buildコマンド

下記コマンドを打つと、それぞれmac版とwin版のデスクトップアプリとして、/release-builds配下にアプリがbuildされます。

$ npm run electron:mac
$ npm run electron:win