React Starter Kit + electron + electron builder サーバーとデスクトップまとめる メモ

##このメモについて
react + express環境を使いたかった
それをelectronでデスクトップアプリにしたかった

##環境
win10 64bit
node 12.14.0
npm 6.9.0
electron 7.1.7


## react-starter-kit
[react-starter-kit](https://github.com/kriasoft/react-starter-kit)

```Install
git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git MyApp
cd MyApp
npm install
```


## electron + electron-builder

- Install
`npm install -D electron electron-builder
`

参考:[electron-starter](https://gist.github.com/origamium/7d8edd3960fa7c3f813a8f3b25d8c5d7)

```javascript:/src/electron-starter.js
const application = require('./application');
+ let app = require('../build/server').default;
global.application = new application();
global.application.run();
```
```javascript:/src/application.js
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');
const url = require('url');

+ const port = process.env.PORT ? process.env.PORT - 100 : 3000;
+ process.env.ELECTRON_START_URL = `http://localhost:${port}`;

module.exports = class Application {
    createWindow() {
        this.mainWindow = new BrowserWindow({
            width: 1366,
            height: 768,
        });
        this.startUrl = process.env.ELECTRON_START_URL || url.format({
            pathname: path.join(__dirname, '/../build/index.html'), // 警告：このファイルを移動する場合ここの相対パスの指定に注意してください
            protocol: 'file:',
            slashes: true,
        });

        this.mainWindow.loadURL(this.startUrl);
        this.mainWindow.on('closed', function () {
            this.mainWindow = null;
        });

        this.mainWindow.webContents.openDevTools();
        const template = [{
            label: 'Application',
            submenu: [
                { label: 'About Application', selector: 'orderFrontStandardAboutPanel:' },
                { type: 'separator' },
                { label: 'Quit', accelerator: 'Command+Q', click: () => { app.quit(); } }
            ]}, {
            label: 'Edit',
            submenu: [
                { label: 'Undo', accelerator: 'CmdOrCtrl+Z', selector: 'undo:' },
                { label: 'Redo', accelerator: 'Shift+CmdOrCtrl+Z', selector: 'redo:' },
                { type: 'separator' },
                { label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
                { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
                { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
                { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' }
            ]},
        ];
        Menu.setApplicationMenu(Menu.buildFromTemplate(template));
    }

    ready() {
        app.on('ready', this.createWindow);
        app.on('window-all-closed', () => {
            if (process.platform !== 'darwin') {
                app.quit();
            }
        });
        app.on('activate', () => {
            if (this.mainWindow === null) {
                this.createWindow();
            }
        });
    }

    run() {
        this.ready();
    }
};
```
- electron-builder 設定ファイル

参考: [electron-builderで詰まったこと](https://qiita.com/Akatsuki1910/items/c2c035d02fb57bc6694e)

```javascript:/build-win.js
const builder = require('electron-builder');

builder.build({
  config: {
    appId: 'local.MyApp',
    win: {
      target: 'zip',
    },
    + files: [
    +   'build/**/*',
    +   'src/electron-starter.js',
    +   'src/application.js',
    +   'node_modules/**/*',
    + ],
  },
});

```
## package.json

```json:/package.json追記
{
   …
   + "main": "src/electron-starter.js",
   + "homepage":"./",
   …
   "scripts":
   {
        …
        + "electron": "electron ."
        …
    }
   …
}
```

##実行
```
npm run build --release
npm run electron
```

終わり