テンプレート探しの旅

• NativeじゃないReactでデスクトップアプリをつくるために、テンプレートを探した

ボイラープレートとCLI

https://www.electronjs.org/ja/docs/latest/tutorial/boilerplates-and-clis

• 自分はCLI派ではあるのだが・・・

electron-forge

https://qiita.com/allJokin/items/76cd3f2627d1497d0a76

• コマンドを何回も打つのが気に入らなかった
• またReactのテンプレートまで作ってくれなかったのが不満

electron-react-boilerplate

https://zenn.dev/tsukker/articles/f0baa690b9f5b3

• コマンド1発で済むのがよかった
• Reactコードのひな型も入ってる
• Jest が最初から入ってる
• 採用

electron-react-boilerplateの動きを試す

プロジェクト作成

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name

動かす

yarn
yarn start

• ちゃんとwebpack-dev-serverが動いているので、修正がリアルタイムで反映されてる

パッケージングする

yarn package

• Windowsだと

./release/build/win-unpacked/your-project-name.exe

• インストーラもできてる（ファイル名にスペースが入ってるのは気に入らない）

"./release/build/your-project-name Setup 4.6.0.exe"

テスト実行

yarn test

• グリーンです
• Tests: 1 passed, 1 total

設定ファイル変更

https://zenn.dev/tsukker/articles/f0baa690b9f5b3

• Step 2以降でまとまっている。助かる

修正の流れ

• Reactのコードは「./src/renderer」に入ってる
• テストコードは「./＿tests＿」に入ってる

結果

• 満足です！