近頃，気の赴くままに React を用いて Web アプリを作ることが多い．

今後，デスクトップアプリとして利用したいなと思っており，Electron に注目した．

そこで，React+Electron でアプリを開発するための雛形を作って，Github に公開した．

リポジトリ

ここ．

リポジトリの名前は react と electron を混ぜて reactron と名付けた．

環境

Ubuntu20.04 LTS npm7.5.4 npx7.5.4

詳細

リポジトリのクローン

$ git clone https://github.com/ysuzuki19/reactron

依存関係の解決

npmを使ってパッケージを管理しているので，以下のコマンドでパッケージをインストールする．

$ npm install

Electron で起動

package.jsonに Electron 起動用のスクリプトを準備しておいたので，以下のコマンドで Electron で起動できる．

$ npm run electron

Linux 上でビルドする

package.jsonに，ビルドコマンドを準備しておいたので，以下のいずれかを実行することでビルドが可能．:w

$ npm run build-linux  # linux用のみビルド
$ npm run build-mac    # mac用のみビルド
$ npm run build-win    # windows用のみビルド
$ npm run build-all    # 上記３つ用にビルド

mac 上でビルドする

Linux ではできなかったが，Mac 上でビルドする場合，package.jsonの以下の行を削除することで，.dmgにしてくれるので，便利である．

"target": "tar.gz"

デベロッパーツールを起動する

public/electron.js内の以下の行をアンコメントアウトすると，Electron を起動する際にデベロッパーツールを開いてくれる．

mainWindow.webContents.openDevTools();