application.js

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

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-starter.js

const application = require('./application');

global.application = new application();
global.application.run();

electron-warit-react.js

const net = require('net');

const port = process.env.PORT ? (process.env.PORT - 100) : 3000;

process.env.ELECTRON_START_URL = `http://localhost:${port}`;

const client = new net.Socket;

let startedElectron = false;
const tryConnection = () => client.connect({port: port}, () => {
    client.end();
    if(!startedElectron) {
        console.log('starting electron...');
        startedElectron = true;
        const exec = require('child_process').exec;
        exec('npm run electron');
    }
});

tryConnection();

client.on('error', (error) => {
    setTimeout(tryConnection, 5000);
});

Procfile

react: npm start
electron: node src/electron-wait-react