超簡単にcreate-react-appでReact + Redux + Electronの開発環境をつくる方法

Electronの開発環境を、create-react-appで作りたかったので調べてたら、ドンピシャのやつを発見した。

How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary.

この通りにやったらできた。create-react-appのreactの部分には一切手を加えず、webpackの設定なども不要で、コードを変えたらすぐにElectronのアプリに反映される。超お手軽で便利です。やり方は下記ですが、electron-with-create-react-appに下記修正後のコードがあります。

やり方

1. アプリ作成、インストール

create-react-appでアプリを作って、electronとnode-foremanをインストールする。

$ create-react-app hoge
$ cd hoge
$ yarn add electron foreman

2. 元ネタリポジトリから必要なものを持ってくる

electron-with-create-react-app内の、下記ファイルを同じ場所にコピーする。

• Procfile
• src/electron-starter.js
• src/electron-wait-react.js

3. package.jsonを編集する

package.json

{
 .
 .
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    .
    .
    "electron": "node_modules/.bin/electron .",
    "dev" : "nf start -p 3000"
  }
}

4. yarn dev

$ yarn dev

これで、開発サーバが起動し、ブラウザに表示された後に、勝手にElectronが起動し、ブラウザと同じ画面が表示されます。コードを編集すると、ブラウザもElectronも勝手にに反映されます。あとは、普通にreduxとかインストールすれば使えます。

パッケージの作成

electron-packagerのインストール

electron-packagerを使います。

$ yarn add electron-packager -D

package.jsonの編集

electron-packagerコマンドをyarn packageで実行できるようにします。

{
 .
 .
  "scripts": {
    .
    .
    "package": "electron-packager . hoge --platform=win32 --arc=x64 --out=release"
  }
}

上記の場合、Windows用のhoge.exeが作成されます。コマンドの使い方は下記です。細かいことがここに書いてありました。

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

DevToolsを非表示にしてbuildする

src/electron-starter.jsの26行目のmainWindow.webContents.openDevTools();をコメントアウトする。

src/electron-starter.js

// Open the DevTools.
//mainWindow.webContents.openDevTools();

ビルドする

$ yarn build

パッケージ作る

$ yarn package