Merge pull request #32 from joshwcomeau/fix-electron-start

Fixed Electron 'premature' load that causes blank screen on run. Elec…

package.json

@@ -10,9 +10,8 @@
     "url": "https://github.com/joshwcomeau/guppy.git"
   },
   "scripts": {
-    "start": "NODE_ENV=development concurrently --kill-others \"npm run start:react\" \"npm run start:electron\"",
-    "start:react": "PORT=5678 BROWSER=none node scripts/start.js",
-    "start:electron": "ELECTRON_START_URL=http://localhost:5678 electron .",
+    "start": "NODE_ENV=development npm run start:react",
+    "start:react": "BROWSER=none node scripts/start.js",
     "build": "node scripts/build.js",
     "package:mac": "electron-packager . --platform=darwin --arch=x64 --icon=src/assets/icons/mac/logo.icns --prune=true --out=release-builds --overwrite",
     "package": "GENERATE_SOURCEMAP=false npm run build && npm run package:mac",
@@ -42,7 +41,6 @@
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "2.3.0",
     "color": "3.0.0",
-    "concurrently": "3.5.1",
     "css-loader": "0.28.9",
     "dotenv": "5.0.0",
     "dotenv-expand": "4.2.0",
@@ -171,4 +169,4 @@
     "icon": null,
     "createdAt": 1529502079329
   }
-}
+}

scripts/start.js

@@ -14,6 +14,7 @@ process.on('unhandledRejection', err => {
 // Ensure environment variables are read.
 require('../config/env');
 
+const { exec } = require('child_process');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
@@ -32,15 +33,47 @@ const createDevServerConfig = require('../config/webpackDevServer.config');
 
 const isInteractive = process.stdout.isTTY;
 
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+/**
+ * Flag to check whether Electron is
+ * running already.
+ */
+let isElectronRunning = false;
+
+/**
+ * Singleton-ish run of Electron
+ * Prevents multiple re-runs of Electron App
+ */
+function runElectronApp() {
+  if (isElectronRunning)
+    return;
+
+  isElectronRunning = true;
+
+  exec(`ELECTRON_START_URL=http://localhost:${DEFAULT_PORT} electron .`,
+    (err, stdout, stderr) => {
+      if (err) {
+        console.info(chalk.red('Electron app run failed: ') + stderr);
+        return;
+      }
+
+      // Clear console for brevity
+      process.stdout.write('\x1bc');
+
+      // Log output
+      console.info(stdout);
+    }
+  );
+}
+
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
 if (process.env.HOST) {
   console.info(
     chalk.cyan(
@@ -104,12 +137,21 @@ checkBrowsers(paths.appPath)
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
         devServer.close();
         process.exit();
       });
     });
+
+    /**
+     * Hook runElectronApp() to 'done' (compile) event
+     * 
+     * Fails on error
+     */
+    compiler.plugin('done',
+      stats => !stats.hasErrors() && runElectronApp()
+    );
   })
   .catch(err => {
     if (err && err.message) {