社内ツールや自分で使うデスクトップアプリを作りたいことがあります． あまり細かいことは気にせず，UIとロジックだけに注力したい場合に
- 「どのバンドルツールを使うか？」
- 「UIフレームワークをどうしよう」
- 「Electron触るの久しぶりだから調べないと」
などの本質じゃない所でハマりたくなかったので，その辺りを補助するライブラリを作りました．
まず，UI周りはReactを使います．
これは，create-react-appが優秀で，ウェブの場合はcreate-react-appを叩けばすぐにUIの構築に取り掛かれるからです．
（とても簡単なもの以外はreduxを入れたりとか，そういうのはありますが，bundleとかHMRだとかに悩む必要がなくなります）
また，3rd Partyのボイラープレートなどではメンテがされていなくて出来るコードが古くて最新のReactにするとエラーや警告がめっちゃ出るということがあって，どのボイラープレートを使うのが正解かわからなかったからです．
そのため，create-react-appを使いたいという要求があります．
最新のReactでcreate-react-appをして，何か少し手を加えれば最新のReactを使ったElectronアプリがサッと作れる感じがベストです．
海外の記事で How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary. というものがありました．
似たようなことに悩んでいる人が手順を追って解決していく記事でした．
しかし，毎回これをやるのはちょっと大変だったので，コマンド1発で行えるようにしました．
react-electron-shell がそれです． 使い方は，
$ create-react-app <YOUR APP NAME> $ cd <YOUR APP NAME> $ npm install react-electron-shell --save $ npm run dev
とやれば，Electron上でcreate-react-appしたロゴがくるくる回るデモが立ち上がります．
react-electron-shellが行っていることはそんなに多くないです．
- Electron関連パッケージインストール
- electron
- electron-packager
- foremanのインストール
- Procfile/Electron.js をコピー
- package.jsonのmain/homepage/scriptsの書き換え
です．
Electron.jsはElectronのブートストラップコードの一部で，windowサイズとかを設定するコードです．後々ユーザが書き換えたいケースが多いので，node_modules内を参照するのではなく，コピーしています．
foremanのインストールとProcfileのコピーはnpm run devでElectronを起動させるための処理を行うために必要でした．
その他の隠蔽しても大丈夫なものはreact-electron-shellの内部に保持して，./node_modules/react-electron-shell/...という形で参照する形にしました．
このあたりの仕組みはReact NativeのExpoが上手くやっていたのでソースを読んでいたら./node_modules内を参照させるという手法だったので，参考にしました．
気になっているのは，npm install react-electron-shellをした時に，カレントディレクトリのpackage.jsonを無理やり書き換えていることで，もう少しいい方法があるのでは・・・と思っています．
最近は新規でElectronアプリを作ってないですが，バンバン小さいデスクトップアプリを作る必要がある人は使ってみるのはいかがでしょうか？
