React アプリを Electron でデスクトップアプリ化する

1
// Modules to control application life and create native browser window
2
const { app, BrowserWindow } = require('electron')
3
const path = require('path')
4
const isDev = require('electron-is-dev')
5

6
function createWindow() {
7
  // Create the browser window.
8
  const mainWindow = new BrowserWindow({
9
    width: 800,
10
    height: 600,
11
    webPreferences: {
12
      preload: path.join(__dirname, 'preload.js'),
13
    },
14
  })
15

16
  // and load the index.html of the app.
17
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`)
18

19
  // Open the DevTools.
20
  // mainWindow.webContents.openDevTools()
21
}
22

23
// This method will be called when Electron has finished
24
// initialization and is ready to create browser windows.
25
// Some APIs can only be used after this event occurs.
26
app.whenReady().then(() => {
27
  createWindow()
28

29
  app.on('activate', function () {
30
    // On macOS it's common to re-create a window in the app when the
31
    // dock icon is clicked and there are no other windows open.
32
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
33
  })
34
})
35

36
// Quit when all windows are closed, except on macOS. There, it's common
37
// for applications and their menu bar to stay active until the user quits
38
// explicitly with Cmd + Q.
39
app.on('window-all-closed', function () {
40
  if (process.platform !== 'darwin') app.quit()
41
})
42

43
// In this file you can include the rest of your app's specific main process
44
// code. You can also put them in separate files and require them here.

1
{
2
  "name": "my-app",
3
  "version": "0.1.0",
4
  "private": true,
5
  "main": "public/electron.js",
6
  "homepage": "./",
7
  "dependencies": {
8
    "@testing-library/jest-dom": "^5.11.4",
9
    "@testing-library/react": "^11.1.0",
10
    "@testing-library/user-event": "^12.1.10",
11
    "electron-is-dev": "^1.2.0",
12
    "react": "^17.0.1",
13
    "react-dom": "^17.0.1",
14
    "react-scripts": "4.0.1",
15
    "web-vitals": "^0.2.4"
16
  },
17
  "scripts": {
18
    "react-start": "cross-env BROWSER=none react-scripts start",
19
    "react-build": "react-scripts build",
20
    "react-test": "react-scripts test",
21
    "react-eject": "react-scripts eject",
22
    "electron-start": "wait-on http://localhost:3000 && electron .",
23
    "electron-build": "electron-builder",
24
    "start": "run-p react-start electron-start",
25
    "build": "run-s react-build electron-build"
26
  },
27
  "eslintConfig": {
28
    "extends": ["react-app", "react-app/jest"]
29
  },
30
  "browserslist": {
31
    "production": [">0.2%", "not dead", "not op_mini all"],
32
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
33
  },
34
  "devDependencies": {
35
    "cross-env": "^7.0.3",
36
    "electron": "^11.1.0",
37
    "electron-builder": "^22.9.1",
38
    "npm-run-all": "^4.1.5",
39
    "wait-on": "^5.2.0"
40
  }
41
}