add qol fixes

Author: bcullman

app/services/LibraryDb.js

@@ -1,12 +1,15 @@
 "use strict";
 
+import fs from "fs";
+import path from "path";
 import _ from "underscore";
 
-import StepTemplates from "./step-templates.json";
-
 class LibraryDb {
-  constructor() {
-    this._items = _.chain(StepTemplates.items)
+  loadTemplates() {
+    const templatePath = path.join(__dirname, "step-templates.json");
+    const stepTemplates = JSON.parse(fs.readFileSync(templatePath, "utf8"));
+
+    return _.chain(stepTemplates.items)
       .map(function (t) {
         if (t.Properties) {
           var script = t.Properties["Octopus.Action.Script.ScriptBody"];
@@ -41,16 +44,14 @@ class LibraryDb {
         return t.Name.toLowerCase();
       })
       .value();
-
-    this._all = _.indexBy(this._items, "Id");
   }
 
   list(cb) {
-    cb(null, this._items);
+    cb(null, this.loadTemplates());
   }
 
   get(id, cb) {
-    var item = this._all[id];
+    var item = _.indexBy(this.loadTemplates(), "Id")[id];
     cb(null, item);
   }
 }

gulpfile.babel.js

@@ -30,8 +30,11 @@ import jasmineReporters from "jasmine-reporters";
 import jasmineTerminalReporter from "jasmine-terminal-reporter";
 import eventStream from "event-stream";
 import fs from "fs";
+import http from "http";
+import https from "https";
 import jsonlint from "gulp-jsonlint";
 import path from "path";
+import { spawn } from "child_process";
 
 const sass = gulpSass(dartSass);
 const clientDir = "app";
@@ -49,6 +52,54 @@ const $ = gulpLoadPlugins({
 const reload = browserSync.reload;
 const argv = yargs.argv;
 
+function openBrowser(url) {
+  if (process.env.CI) {
+    return;
+  }
+
+  if (process.platform === "darwin") {
+    spawn("open", [url], { detached: true, stdio: "ignore" }).unref();
+    return;
+  }
+
+  if (process.platform === "win32") {
+    spawn("cmd", ["/c", "start", "", url], { detached: true, stdio: "ignore" }).unref();
+    return;
+  }
+
+  spawn("xdg-open", [url], { detached: true, stdio: "ignore" }).unref();
+}
+
+function waitForServer(url, { timeoutMs = 10000, pollIntervalMs = 200 } = {}) {
+  const parsedUrl = new URL(url);
+  const client = parsedUrl.protocol === "https:" ? https : http;
+  const startedAt = Date.now();
+
+  return new Promise((resolve) => {
+    function tryConnect() {
+      const request = client.get(url, (response) => {
+        response.resume();
+        resolve();
+      });
+
+      request.on("error", () => {
+        if (Date.now() - startedAt >= timeoutMs) {
+          resolve();
+          return;
+        }
+
+        setTimeout(tryConnect, pollIntervalMs);
+      });
+
+      request.setTimeout(pollIntervalMs, () => {
+        request.destroy();
+      });
+    }
+
+    tryConnect();
+  });
+}
+
 const vendorStyles = [
   "node_modules/font-awesome/css/font-awesome.min.css",
   "node_modules/font-awesome/css/font-awesome.css.map",
@@ -323,17 +374,16 @@ function provideMissingData() {
   });
 }
 
-gulp.task(
-  "step-templates",
-  gulp.series("tests", () => {
-    return gulp
-      .src("./step-templates/*.json")
-      .pipe(provideMissingData())
-      .pipe(concat("step-templates.json", { newLine: "," }))
-      .pipe(insert.wrap('{"items": [', "]}"))
-      .pipe(argv.production ? gulp.dest(`${publishDir}/app/services`) : gulp.dest(`${buildDir}/app/services`));
-  })
-);
+gulp.task("step-templates:data", () => {
+  return gulp
+    .src("./step-templates/*.json")
+    .pipe(provideMissingData())
+    .pipe(concat("step-templates.json", { newLine: "," }))
+    .pipe(insert.wrap('{"items": [', "]}"))
+    .pipe(argv.production ? gulp.dest(`${publishDir}/app/services`) : gulp.dest(`${buildDir}/app/services`));
+});
+
+gulp.task("step-templates", gulp.series("tests", "step-templates:data"));
 
 gulp.task("styles:vendor", () => {
   return gulp.src(vendorStyles, { base: "node_modules/" }).pipe(argv.production ? gulp.dest(`${publishDir}/public/styles/vendor`) : gulp.dest(`${buildDir}/public/styles/vendor`));
@@ -426,14 +476,28 @@ gulp.task(
     server.start();
     process.chdir(`../`);
 
-    browserSync.init(null, {
-      proxy: "http://localhost:9000",
-    });
+    browserSync.init(
+      null,
+      {
+        proxy: "http://localhost:9000",
+        open: false,
+      },
+      () => {
+        waitForServer("http://localhost:9000").then(() => {
+          openBrowser("http://localhost:9000");
+        });
+      }
+    );
+
+    function reloadServer(done) {
+      server.start.bind(server)();
+      done();
+    }
 
     gulp.watch(`${clientDir}/**/*.jade`, gulp.series("build:client"));
-    gulp.watch(`${clientDir}/**/*.jsx`, gulp.series("scripts", "copy:app"));
+    gulp.watch(`${clientDir}/**/*.jsx`, gulp.series("scripts", "copy:app", reloadServer));
     gulp.watch(`${clientDir}/content/styles/**/*.scss`, gulp.series("styles:client"));
-    gulp.watch("step-templates/*.json", gulp.series("step-templates"));
+    gulp.watch("step-templates/*.json", gulp.series("step-templates:data"));
 
     gulp.watch(`${buildDir}/**/*.*`).on("change", reload);
   })

server/server.js

@@ -74,11 +74,13 @@ app.get("*", (req, res) => {
 
         LibraryActions.sendTemplates(data, () => {
           var libraryAppHtml = ReactDOMServer.renderToStaticMarkup(<RouterContext {...renderProps} />);
+          const browserSyncClientUrl = process.env.NODE_ENV === "development" ? `${req.protocol}://${req.hostname}:3000/browser-sync/browser-sync-client.js` : null;
           res.render("index", {
             siteKeywords: config.keywords.join(),
             siteDescription: config.description,
             reactOutput: libraryAppHtml,
             stepTemplates: JSON.stringify(data),
+            browserSyncClientUrl,
           });
         });
       });

server/views/index.pug

@@ -46,5 +46,8 @@ html
 
       ga('create', 'UA-24461753-5', 'octopusdeploy.com');
 
+    if browserSyncClientUrl
+      script(type='text/javascript', async=true, src=browserSyncClientUrl)
+
     //- inject:js
     //- endinject