electron-starter.js

// Path firstelectronapp/src/electron-starter.js
// NodeJS Programming
const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;
const app      = electron.app;
const url      = require('url')
const path     = require('path')

var mainWindow;  // MainWindow Object

app.on('ready', () => {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 800, height: 480, webPreferences: { nodeIntegration: true }
    });

    // and load the index.html of the app.
    const startUrl = process.env.ELECTRON_START_URL || url.format({
            pathname: path.join(__dirname, '/../build/index.html'),
            protocol: 'file:',
            slashes: true
    });
    mainWindow.loadURL(startUrl);
    console.log("Render")
});

electron-wait-react.js

// Path firstelectronapp/src/electron-wait-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;
            const electron = exec('npm run electron');
            electron.stdout.on("data", function(data) {
                console.log("stdout: " + data.toString());
            });
        }
    }
);

tryConnection();

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

example-of-package.json

{
  "name": "firstelectronapp",
  "version": "0.1.0",
  "private": true,
  "main": "src/electron-starter.js",
  "homepage": "./",
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^5.11.1",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.0.15",
    "electron": "^9.1.1",
    "electron-builder": "^22.4.1",
    "electron-log": "^4.1.1",
    "electron-rebuild": "^1.10.1",
    "foreman": "^3.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "rebuild": "./node_modules/.bin/electron-rebuild ",
    "dev": "nf start -p 3000"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Procfile

react: BROWSER=none npm start
electron: node src/electron-wait-react

sftp.json

{
"name": "Ours RPI4",
"host": "192.168.1.115",
"protocol": "sftp",
"port": 22,
"username": "pi",
"password": "jameskung",
"remotePath": "/home/pi/Documents/app",
"uploadOnSave": false,
"ignore": [
".vscode",
".git",
".DS_Store",
"VENV",
"node_modules",
"package-lock.json"
]
}