Zenn
🚀

Electron + React + TypeScript 環境作成手順 (2021-09)

2021/09/29に公開
Electron
tech

Motivation

Electron + React + TypeScript でマルチプラットフォームなネイティブアプリケーションをいい感じに作りたい。

Conclusion

Electron React Boilerplate を利用する。
選定理由は以下。

  • React, TypeScript に加えて、Prettier, ESLint, Jest が最初から導入されている
  • ビルドツールとして electron-builder が採用されている
  • GitHub Actions でのテストおよびマルチプラットフォームをターゲットにしたビルド・パッケージング・リリースの作成までが整備されている
  • 実際に試したところ意図通りの挙動を示した

How to start development

以下のステップを実行する:

Step 1

まず Boilerplate をそのままローカルに落として以下のコマンドで動作確認を行う。

yarn install
yarn package

実行可能ファイルが生成されればOK。

Step 2

.git を削除し、新しく git init する。
そのまま全体を First commit とする。
GitHub でリポジトリを作成し、push する。

Step 3

.github/workflows/publish.yml を編集する

3-1: Enable auto publishing to GitHub

publish job の冒頭の if statement をコメントアウトする。なお、指示されている package.json の変更は Step 4 で行う

3-2: Signing

以下のうちいずれかを行う。

Option 1

Publish releases step の env: APPLE_ID APPLE_ID_PASS CSC_LINK CSC_KEY_PASSWORD を、リポジトリの secrets に設定する。
これには費用がかかる

Option 2

Publish releases step の env: APPLE_ID APPLE_ID_PASS CSC_LINK CSC_KEY_PASSWORD が記述されている4行をコメントアウトする。
この場合、生成される実行可能ファイルは署名されない

Step 4

package.json および build/app/package.json を編集する。

4-1: package.json

  • name: The name of the package.
  • productName: 実行ファイル名に利用される
  • description: This helps people discover your package, as it's listed in npm search.
  • build
    • productName: productName と同じ値
    • appId: 識別子。たぶん npm にアップロードしない場合は何でもよい
    • publish
      • provider: "github" のままでOK
      • owner: GitHub のアカウント名などにする
      • repo: 自分が作成したリポジトリに変更する
  • repository
    • url: 自分が作成したリポジトリに変更する
  • author
    • 自分の情報に変更する
  • contributors
    • 自分の情報に変更するか、消す
  • bugs
    • url: 自分のリポジトリに変更するか、消す
  • homepage: 変更するか、消す
  • collective
    • url: 変更するか、消す

4-2: build/app/package.json

  • name: The name of the package. package.json > name と同じ値
  • productName: package.json > name と同じ値。たぶん何でもいい
  • version: "0.1.0" とかに変更しておく。main ブランチへのマージ時にはこの値が更新されているようにすることでリリースを生成する、というのが普通の運用だと思う
  • description: package.json > description と同じ値とかに変更しておく
  • author
    • package.json > author と同じ値

Step 5

その他、以下のファイルを適宜変更したり削除したりする

  • CHANGELOG.md
  • CODE_OF_CONDUCT.md
  • LICENSE
  • README.md

Step 6

ESLint に現在は非推奨の設定が入っているので修正する

Development

ここまでで開発を始める準備ができた。
まだよく分かっていないが、基本的には src/renderer 以下のファイルたちを触ればいいような雰囲気がある。

Discussion