ReactとElectronでデスクトップアプリを作成する方法

// 各モジュールのインポート
const {app, BrowserWindow} = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');


// ブラウザウィンドウに関する処理
function createWindow () {
    // ブラウザウィンドウの作成
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')// ウィンドウプロセスの初期化スクリプト指定
        }
    })

    // URLの読み込み
    mainWindow.loadURL(
        isDev
        ? "http://localhost:3000"// 開発環境の場合
        : `file://${path.join(__dirname, "../build/index.html")}`// 本番環境の場合
    );
}


// 初期化が完了し、ウィンドウの起動準備ができた時に呼ばれる処理（APIの呼び出しはこの処理の後）
app.whenReady().then(() => {
    createWindow()

    // DjangoをGunicorn経由で起動する処理（※後ほど記述）

    app.on('activate', function () {
        // 開いているウィンドウがなければ開く
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})


// ウィンドウが閉じた時の処理（macOSでは明示的にアプリケーションを終了した時）
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",
  "homepage": "./",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "electron-is-dev": "^2.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "react-start": "cross-env BROWSER=none react-scripts start",
    "react-build": "react-scripts build",
    "electron-start": "wait-on http://localhost:3000 && electron .",
    "electron-build": "electron-builder",
    "start": "run-p react-start electron-start",
    "build": "run-s react-build electron-build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^19.0.8",
    "electron-builder": "^23.1.0",
    "npm-run-all": "^4.1.5",
    "wait-on": "^6.0.1"
  }
}