Posted at

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

More than 1 year has passed since last update.

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でアプリを作って、electronnode-foremanをインストールする。

$ create-react-app hoge

$ cd hoge
$ yarn add electron foreman


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

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


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