はじめに

デスクトップアプリをElectronで普通に作っていましたが、そろそろフレームワークも使ってみたいなと思い、Reactを使ってデスクトップアプリを作るための方法です。
IDEはJetBrains社のWebStormを使っています。

また、この記事は、React+ElectronでHello Worldするを参考に、
WebStormで作成するための手順です。ありがとうございます。

環境

Windows10 64bit
WebStorm 2020.3
Electron 11.1.1
React 17.0.1
node.js 14.15.1

1. Reactプロジェクトを作る

WebStormを起動し、File > New > Project...を選択
左のペインからReactを選択し、右のLocation:にプロジェクト名を入れます。

createを選択したら、必要なデータがダウンロードされ、プロジェクトが作成されます。

2. Reactの表示確認

package.jsonを開きます。

package.json

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

startと記述のある所の左の再生ボタンを押して、Run 'npm start'を選択します。

ブラウザが開き、コンパイルが走り、以下の画面が出ればReactは動いてます。

3. NPMモジュールの追加

Reactの起動が確認できたら、次は、Electronで実行するためのモジュールを入れていきます。
File > Settings...を選択すると、Settingsウィンドウが開きます。
Languages & Frameworks > Node.js and NPMを選び、+を押して、以下のモジュールをinstallします。

electron：Electronの実行モジュールです
electron-packager：Electronをパッケージ化するモジュールです
concurrently：複数のコマンドを実行するモジュールです

4. Electron用のファイルの作成

ほぼこちらの記事を引用させていただいております。

publicフォルダに以下のファイルを追加します。

package.json

{
    "name":"electron-test",
    "version":"1.0.0",
    "main":"main.js"
}

main.js

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

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({ width: 800, height: 600 })

    // 環境変数 ELECTRON_START_URL が定義されていればそれを使う。なければ index.html を使う。
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    })
    mainWindow.loadURL(startUrl)

    // 開発中のみ開発者ツールを表示
    if (process.env.ELECTRON_START_URL) {
        mainWindow.webContents.openDevTools()
    }

    mainWindow.on('closed', _ => {
        mainWindow = null
    })
}

app.on('ready', createWindow)

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

app.on('activate', _ => {
    if (mainWindow === null) {
        createWindow()
    }
})

実行用のpackage.jsonをElectronで実行するためのスクリプトを変更します。
※jsonファイルはコメントタグが使えないので、値として入れています。

package.json

{
  ...
  "scripts": {
    "//1": "// Electron のビルドスクリプト",
    "electron-dev": "set ELECTRON_START_URL=http://localhost:3000 && electron public",
    "electron-build": "electron-packager build  --platform=win32 --arch=x64 --overwrite --asar",

    "//2": "// React のビルドスクリプト",
    "react-start": "react-scripts start","//3": "// 元の start から変更",
    "react-build": "react-scripts build","//4": "// 元の build から変更",

    "//5": "// 開発時に使用",
    "start": "concurrently \"npm run react-start\" \"npm run electron-dev\"",

    "//6": "// ビルド時に使用",
    "build": "npm run react-build && npm run electron-build"
  },
  "//7": "Reactのビルド時にリソースを相対パスで読み込むようにする",
  "homepage": "./",
  ...
}

"homepage": "./"を指定することでReactのビルド時にソースの読み込み先が相対パスになります。

とのことですので、忘れずに追加してください。

5. Electronの実行

Reactの表示確認で行った時と同じように//5のstartを実行します。
ウィンドウにReactの画面が表示出来たら実行完了です。

6. Electronのビルド

デスクトップアプリケーションにするために、//6のbuildを実行します。
フォルダ内に新しくbuildフォルダが出来たら、exeを実行してみてください。
今回のelectron-packagerの出力設定は、buildフォルダに、windows形式(--platform=win32)で、64bit版(--arch=x64)、上書き(--overwrite)で、圧縮した(--asar)ファイルを作成する、という感じの設定になっています。

参考

React+ElectronでHello Worldする
 electron + Reactで5分でHelloWorldする
 ReactのプロジェクトをElectron化する。

WebStormを使って React を Electron で動かす

はじめに

目次

環境

1. Reactプロジェクトを作る

2. Reactの表示確認

3. NPMモジュールの追加

4. Electron用のファイルの作成

5. Electronの実行

6. Electronのビルド

参考