create-react-app × electron-packager の最小設定

2020-04-17

本当は electron-builder を入れたかったんですが、エラーが出まくって諦めました。

以下、windows 上での正常動作を確認しました。

electron-packager などをインストールする

npm i --save-dev electron-packager electron-is-dev

main.js を修正する

const { app, BrowserWindow } = require("electron");
const isDev = require("electron-is-dev");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadURL(
    isDev
      ? "http://localhost:3000/index.html"
      : `file://${__dirname}/build/index.html`,
  );

  if (isDev) {
    win.webContents.openDevTools();
  }
}

app.allowRendererProcessReuse = false;

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

パッケージ化するときは build されたファイルを読み込むように設定するだけですね。

package.json に homepage を追加する

"homepage": "./",

ここの設定に気づかず、やたら時間を取られました…。

package.json に パッケージ用のスクリプト を追加する

"scripts": {
  "package": "electron-packager . hoge --platform=win32 --arch=x64 --electronVersion=8.2.3 --overwrite"
},

今回は windows x64 向けの設定にしてあります。

--out=dist などのオプションを追加するのも良いですね。

electron-packager を起動する

  1. npm run build
  2. npm run package

恐らく Mac でも動くはず。