launching dev server now works no matter what

.gitignore

@@ -95,4 +95,7 @@ app/dist/
 dist/
 
 # VSCode specific
-.vscode/
+.vscode/
+
+# Logfile specific for development builds
+dev-scripts/webpack-dev-server.log

dev-scripts/launchDevServer.js

@@ -0,0 +1,34 @@
+const fs = require("fs");
+const {
+  exec
+} = require("child_process");
+const logFilePath = "./dev-scripts/webpack-dev-server.log";
+const interval = 100;
+
+// Poll webpack-dev-server.log until the webpack bundle has compiled successfully
+const intervalId = setInterval(function () {
+  try {
+    if (fs.existsSync(logFilePath)) {
+      const log = fs.readFileSync(logFilePath, {
+        encoding: "utf8"
+      });
+
+      // "Compiled successfully." is the string we need to find
+      // to know that webpack is done bundling everything and we
+      // can load our Electron app with no issues.
+      if (log.indexOf("Compiled successfully.") >= 0) {
+        console.log("Webpack development server is ready, launching Electron app.");
+        clearInterval(intervalId);
+
+        // Start our electron app
+        exec("cross-env NODE_ENV=development electron .");
+      }
+    }
+  } catch (error) {
+    // Exit with an error code
+    console.error("Webpack or electron fatal error" + error);
+    clearInterval(intervalId);
+
+    return process.exit(1);
+  }
+}, interval);

dev-scripts/prepareDevServer.js

@@ -0,0 +1,17 @@
+const fs = require("fs");
+const {
+  exec
+} = require("child_process");
+const logFilePath = "./dev-scripts/webpack-dev-server.log";
+
+console.log("Preparing webpack development server.");
+
+// Delete the old webpack-dev-server.log if it is present
+try {
+  fs.unlinkSync(logFilePath);
+} catch (error) {
+  // Existing webpack-dev-server log file may not exist
+}
+
+// Start the webpack development server
+exec("npm run dev-server");

docs/architecture.md

@@ -5,6 +5,7 @@ This template is laid out in order to maintain a clear separation-of-concerns (S
 app/
 docs/
 resources/
+dev-scripts/
 ```
 
 #### app
@@ -16,6 +17,9 @@ Houses documentation pages such as this one.
 #### resources
 Any resources your electron app needs in for building/distributing executables should go here - icons are a great example.
 
+#### dev-scripts
+Due to limitations in running electron _after_ a webpack development server has been started [and successfully compiled], additional scripts that run the development Electron configuration are in this directory that ensure we only start our _development_ Electron configuration _after_ webpack has loaded completely.
+
 ## configs
 At the root level we also have some configuration files.
 

docs/scripts.md

@@ -4,6 +4,8 @@ This page is specific to the scripts in the package.json file; what they do and
 #### Running locally
 To run the template locally, run `npm run dev`.
 
+When this command is run, it will make use of code within the **dev-scripts** folder. [See here](https://github.com/reZach/secure-electron-template/blob/master/docs/architecture.md#dev-scripts) if you'd like additional information.
+
 #### Running production
 You can test your production builds with the `npm run prod` command, this will load your application with electron and the production config of webpack. It is the production build that is used when packaging your application (below).
 

package.json

@@ -1,15 +1,15 @@
 {
   "name": "secure-electron-template",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "description": "The best way to build Electron apps with security in mind.",
   "private": true,
   "main": "app/electron/main.js",
   "scripts": {
     "postinstall": "electron-builder install-app-deps",
     "audit-app": "npx electronegativity -i ./ -x LimitNavigationGlobalCheck,PermissionRequestHandlerGlobalCheck",
     "translate": "node ./app/localization/translateMissing.js",
-    "dev-server": "cross-env NODE_ENV=development webpack serve --config ./webpack.development.js",
-    "dev": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=development electron .\" -k",
+    "dev-server": "cross-env NODE_ENV=development webpack serve --config ./webpack.development.js > dev-scripts/webpack-dev-server.log",
+    "dev": "concurrently --success first \"node dev-scripts/prepareDevServer.js\" \"node dev-scripts/launchDevServer.js\" -k",
     "prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
     "prod": "npm run prod-build && electron .",
     "pack": "electron-builder --dir",