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

2020-04-15

どのサイトを見てもごちゃごちゃと書かれていてわかりづらかったので備忘録がてら。

create-react-app を用いてプロジェクトが生成されていることを前提とします。

electron をインストールする

npm i --save-dev electron

ルートディレクトリ配下に main.js を作成する

const { app, BrowserWindow } = require("electron");

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

  // win.loadFile('index.html')
  win.loadURL("http://localhost:3000/index.html");

  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

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

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

TypeScript でも書こうと思えば書けるみたいですが、ひとまず JS で。

公式サイトの記述とほぼ変わりません。

package.json に electron に関する設定を追加する

"main": "main.js",

"scripts": {
  "electron": "electron ."
},

electron を起動する

  1. npm start
  2. npm run electron

Concurrently あたりを使うといい感じっぽいですが、今回は最低限で。

warning 周りについて

これとこれで解決しました。

起動コマンドを少しカスタマイズする

npm i --save-dev concurrently cross-env wait-on

"scripts": {
  "electron": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
},

起動するだけならむちゃくちゃシンプルですね。