Electron+ReactでHello world

ElectronのUIをReactで作ってみます。
次のステップで作っていきます。

1. Reactアプリをcreate-react-appで作る。
2. 作ったReactアプリをElectronで読み込み表示する。

ググるとlocalhost:3000で起動したReactアプリを読み込む例が多いですが、ここではビルドしたものを読み込むことにします。

※環境: Windows 10 Home, Node.js v14.17.4, Electron v15.1.1

Reactアプリを作る

まずはcreate-react-appでReactアプリを作ります。
アプリ名は適当にerhelloとしますが何でもOKです。

> npx create-react-app erhello

一応Hello worldですのでApp.jsでHello, world!と表示するように変更しますが、そのままでもかまいません。

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, world! 
        </p>
      </header>
    </div>
  );
}

export default App;

ReactアプリをElectron上で表示する

Electronを追加インストールします。

> cd erhello
> npm i -D electron

続いて、package.jsonを編集します。
いつも通りエントリーポイントのファイル名を変更します。
加えて、Reactのアウトプットが相対パスで動作するようにhomepageも指定します。

package.json

  ...
  "main" : "main.js",
  "homepage" : "./",
  ...

main.jsは前回のElectron単独のHello,worldで作ったものを使い回します。
今回の変更点は、読み込むindex.htmlのパスをReactのビルド先に合わせることだけです。

main.js

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

function createWindow () {
  // ウインドウ作成
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // index.htmlの内容でウィンドウ表示
  mainWindow.loadFile('./build/index.html'); // パス変更
}

// Electronの初期化完了時に呼ばれる
app.whenReady().then(() => {
  createWindow();

  // Mac用処理
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  })
});

// (Mac以外は)ウインドウが全部閉じられたら終了
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

ビルドを実行し、Electronアプリを起動してみます。

> npm run build
> npx electron .

次のようにHello world画面が表示されれば成功です。

次回は、Electronのメインプロセスとの通信を試してみたいと思います。