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

完全に 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 で起動します。

そんな感じです。

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