【Node.js】React+Electronのプロジェクトを作る

ReactとElectronでデスクトップアプリを作ってみたい！

ということでReactとElectronなプロジェクトを作ってみる。

概要

今回の記事では、ReactとElectronなプロジェクトを作る手順を掲載する。

仕様書

環境

react 18.3.1
react-dom 18.3.1
react-scripts 5.0.1
typescript 4.9.5
electron 30.1.0
electron-builder 24.13.3

手順書

インストール編とデバッグ編と実行ファイル出力編の3部構成です。

インストール編

Reactのプロジェクトを作るのにcreate-react-appを使うのでインストールする。

npm install -g create-react-app

create-react-appでプロジェクトを作る。TypeScriptを使いたいのでテンプレートを指定した。

npx create-react-app react-electron-test --template typescript

プロジェクトのフォルダに入って、electron関連のパッケージをインストールする。

cd react-electron-test
npm install --save-dev electron electron-builder

electron/main.jsを作って下記のような感じにする。

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.resolve(__dirname, 'preload.js'),
        },
    });

    win.loadFile('./build/index.html');
};

app.whenReady().then(createWindow);

app.once('window-all-closed', () => app.quit());

将来使う予定のelectron/preload.jsを作る。中身は空。

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

{
    ...
    "main": "electron/main.js",
    "homepage": "./",
    "scripts": {
        ...
        "electron": "electron .",
        "build-win": "electron-builder -w",
        "build-mac": "electron-builder -m"
    }
    ...
    "author": "author_name",
    "license": "MIT",
    "build": {
        "productName": "react-electron-test",
        "appId": "com.example.react-electron-test",
        "extends": null,
        "files": [
            "electron/**/*",
            "build/**/*"
        ],
        "mac": {
            "target": "dir"
        },
        "win": {
            "target": "dir"
        }
    }
}

デバッグ編

デバッグは通常のReactのプロジェクトと同様にブラウザでやってもいいし。

npm start

electron .を実行してelectronのウィンドウでやってもいい。先にnpm startを実行しておく。

npm start
npm run electron

実行ファイル出力編

npm buildを実行後にelectron-builder -wを実行するとdist/win-unpackedに実行ファイル(EXE)とリソースが出力される。

npm build
npm run build-win

electron-builder -mだとmacOS用のファイルが出力される。macOSでコマンドを実行する必要がある。

npm build
npm run build-mac

まとめ（感想文）

Flutterとどっちを使うか迷う！