Create React App に Electron を導入してみた

2021-08-31

完全に TypeScript をサポートした記事が少なかったので、備忘録がてら。

さっき正常動作が確認できたばかりなので、本当に最小限の設定なのであしからず。

Create React App をインストールする

いつもどおりのコマンドです。

npx create-react-app hoge --use-npm --template typescript

Electron の開発周りの npm パッケージを追加する

自分が追加したのは以下のとおりです。

  • concurrently
  • electron
  • electron-is-dev
  • electron-reload
  • npm-run-all
  • wait-on

dependencies なり devDependencies なり、お好きな方にどうぞ。

Electron 起動用のファイルを作る

今回はルートディレクトリ以下に electron.ts を作成しました。

import { app, BrowserWindow } from "electron"; import path from "path"; import isDev from "electron-is-dev"; function createWindow() { const browserWindow = new BrowserWindow({ width: 800, height: 600, }); browserWindow.loadURL( isDev ? "http://localhost:3000/index.html" : // 動作未確認です `file://${__dirname}/public/index.html` ); if (isDev) { require("electron-reload")(__dirname, { electron: path.join(__dirname, "node_modules", ".bin", "electron"), forceHardReset: true, hardResetMethod: "exit", }); const { webContents } = browserWindow; webContents.openDevTools(); } } app.whenReady().then(createWindow); app.on("activate", () => { const browserWindows = BrowserWindow.getAllWindows(); if (browserWindows.length) { return; } createWindow(); }); app.on("window-all-closed", () => { if (process.platform === "darwin") { return; } app.quit(); });

Electron 用の tsconfig ファイルを作る

今回は tsconfig.electron.json という名前でルートディレクトリ直下に配置しました。

{ "compilerOptions": { "baseUrl": "src", "esModuleInterop": true, "jsx": "react-jsx", "module": "CommonJS", "outDir": "./dist" } }

内容はよしなにお願いします。

スクリプトを追加する

ひとまず以下のスクリプトを追加してみました、Windows だとちょっと動作するか怪しいですが…。

{ "scripts": { ..., "dev": "rimraf ./dist && npm run tsc:electron && run-p tsc:electron:watch start:electron", "start:electron": "concurrently -k 'BROWSER=none npm start' 'wait-on tcp:3000 && electron .'", "tsc:electron": "tsc -p ./tsconfig.electron.json", "tsc:electron:watch": "tsc -p ./tsconfig.electron.json -w" }, }

main ファイルを設定する

続けて package.json に main フィールドを追加します。

{ "main": "./dist/electron.js" }

起動する

npm run dev で起動します。


そんな感じです。

多分まだ漏れがあるとは思いますが、ひとまず。

© 2018 kk-web