Serve and open built files

cli/build.js

@@ -3,10 +3,14 @@
 
 const fs = require('fs-extra');
 const merge = require('merge');
+
 const skyPagesConfigUtil = require('../config/sky-pages/sky-pages.config');
 const generator = require('../lib/sky-pages-module-generator');
 const assetsProcessor = require('../lib/assets-processor');
 const pluginFileProcessor = require('../lib/plugin-file-processor');
+
+const server = require('./utils/server');
+const browser = require('./utils/browser');
 const runCompiler = require('./utils/run-compiler');
 const tsLinter = require('./utils/ts-linter');
 
@@ -114,45 +118,66 @@ function cleanupAot() {
   fs.removeSync(skyPagesConfigUtil.spaPathTemp());
 }
 
-/**
- * Executes the build command.
- * @name build
- */
-function build(argv, skyPagesConfig, webpack) {
-  const compileModeIsAoT = skyPagesConfig &&
-    skyPagesConfig.skyux &&
-    skyPagesConfig.skyux.compileMode === 'aot';
-
-  let buildConfig;
+function buildServe(argv, skyPagesConfig, webpack, isAot) {
+  const base = skyPagesConfigUtil.getAppBase(skyPagesConfig);
+  return server
+    .start(base)
+    .then(port => {
+      argv.assets = argv.assets || `https://localhost:${port}`;
+      return buildCompiler(argv, skyPagesConfig, webpack, isAot)
+        .then(stats => {
+          browser(argv, skyPagesConfig, stats, port);
+          return stats;
+        });
+    });
+}
 
+function buildCompiler(argv, skyPagesConfig, webpack, isAot) {
   const assetsBaseUrl = argv.assets || '';
   const assetsRel = argv.assetsrel;
 
-  const lintResult = tsLinter.lintSync();
-  if (lintResult.exitCode > 0) {
-    process.exit(lintResult.exitCode);
-    return;
-  }
+  let buildConfig;
 
-  if (compileModeIsAoT) {
+  if (isAot) {
     stageAot(skyPagesConfig, assetsBaseUrl, assetsRel);
     buildConfig = require('../config/webpack/build-aot.webpack.config');
   } else {
     buildConfig = require('../config/webpack/build.webpack.config');
   }
 
   const config = buildConfig.getWebpackConfig(skyPagesConfig);
-
   assetsProcessor.setSkyAssetsLoaderUrl(config, skyPagesConfig, assetsBaseUrl, assetsRel);
 
-  return runCompiler(webpack, config)
+  return runCompiler(webpack, config, isAot)
     .then(stats => {
-      if (compileModeIsAoT) {
+      if (isAot) {
         cleanupAot();
       }
 
-      return Promise.resolve(stats);
+      return stats;
     });
 }
 
+/**
+ * Executes the build command.
+ * @name build
+ * @param {*} skyPagesConfig
+ * @param {*} webpack
+ * @param {*} isAot
+ */
+function build(argv, skyPagesConfig, webpack) {
+
+  const lintResult = tsLinter.lintSync();
+  const isAot = skyPagesConfig &&
+    skyPagesConfig.skyux &&
+    skyPagesConfig.skyux.compileMode === 'aot';
+
+  if (lintResult.exitCode > 0) {
+    process.exit(lintResult.exitCode);
+  } else {
+    const name = argv.serve ? buildServe : buildCompiler;
+    return name(argv, skyPagesConfig, webpack, isAot);
+  }
+}
+
 module.exports = build;

cli/e2e.js

@@ -4,16 +4,15 @@
 const glob = require('glob');
 const path = require('path');
 const spawn = require('cross-spawn');
-const logger = require('../utils/logger');
-const portfinder = require('portfinder');
-const HttpServer = require('http-server');
 const selenium = require('selenium-standalone');
+
 const build = require('./build');
+const server = require('./utils/server');
+const logger = require('../utils/logger');
 
 // Disable this to quiet the output
 const spawnOptions = { stdio: 'inherit' };
 
-let httpServer;
 let seleniumServer;
 let start;
 
@@ -45,18 +44,13 @@ function killServers(exitCode) {
     seleniumServer = null;
   }
 
-  if (httpServer) {
-    logger.info('Closing http server');
-    httpServer.close();
-    httpServer = null;
-  }
-
   // Catch protractor's "Kitchen Sink" error.
   if (exitCode === 199) {
     logger.warn('Supressing protractor\'s "kitchen sink" error 199');
     exitCode = 0;
   }
 
+  server.stop();
   logger.info(`Execution Time: ${(new Date().getTime() - start) / 1000} seconds`);
   logger.info(`Exiting process with ${exitCode}`);
   process.exit(exitCode || 0);
@@ -91,6 +85,7 @@ function spawnProtractor(chunks, port, skyPagesConfig) {
     protractorPath,
     [
       getProtractorConfigPath(),
+      `--disableChecks`,
       `--baseUrl ${skyPagesConfig.skyux.host.url}`,
       `--params.localUrl=https://localhost:${port}`,
       `--params.chunks=${JSON.stringify(chunks)}`,
@@ -150,42 +145,6 @@ function spawnSelenium() {
   });
 }
 
-/**
- * Spawns the httpServer
- */
-function spawnServer() {
-  return new Promise((resolve, reject) => {
-    logger.info('Requesting open port...');
-
-    httpServer = HttpServer.createServer({
-      root: 'dist/',
-      cors: true,
-      https: {
-        cert: path.resolve(__dirname, '../', 'ssl', 'server.crt'),
-        key: path.resolve(__dirname, '../', 'ssl', 'server.key')
-      },
-      logFn: (req, res, err) => {
-        if (err) {
-          reject(err);
-          return;
-        }
-      }
-    });
-
-    portfinder
-      .getPortPromise()
-      .then(port => {
-        logger.info(`Open port found: ${port}`);
-        logger.info('Starting web server...');
-        httpServer.listen(port, 'localhost', () => {
-          logger.info('Web server running.');
-          resolve(port);
-        });
-      })
-      .catch(reject);
-  });
-}
-
 /**
  * Spawns the build process.  Captures the config used.
  */
@@ -218,7 +177,7 @@ function e2e(argv, skyPagesConfig, webpack) {
     return killServers(0);
   }
 
-  spawnServer()
+  server.start()
     .then((port) => {
       argv.assets = 'https://localhost:' + port;
 

cli/utils/browser.js

@@ -0,0 +1,78 @@
+/*jslint node: true */
+'use strict';
+
+const util = require('util');
+const open = require('open');
+const logger = require('winston');
+const hostUtils = require('../../utils/host-utils');
+const skyPagesConfigUtil = require('../../config/sky-pages/sky-pages.config');
+
+/**
+ * Returns the querystring base for parameters allowed to be passed through.
+ * PLEASE NOTE: The method is nearly duplicated in `runtime/params.ts`.
+ * @name getQueryStringFromArgv
+ * @param {Object} argv
+ * @param {SkyPagesConfig} skyPagesConfig
+ * @returns {string}
+ */
+function getQueryStringFromArgv(argv, skyPagesConfig) {
+
+  let found = [];
+  skyPagesConfig.skyux.params.forEach(param => {
+    if (argv[param]) {
+      found.push(`${param}=${encodeURIComponent(argv[param])}`);
+    }
+  });
+
+  if (found.length) {
+    return `?${found.join('&')}`;
+  }
+
+  return '';
+}
+
+function browser(argv, skyPagesConfig, stats, port) {
+
+  const queryStringBase = getQueryStringFromArgv(argv, skyPagesConfig);
+  let localUrl = util.format(
+    'https://localhost:%s%s',
+    port,
+    skyPagesConfigUtil.getAppBase(skyPagesConfig)
+  );
+
+  let hostUrl = hostUtils.resolve(
+    queryStringBase,
+    localUrl,
+    stats.toJson().chunks,
+    skyPagesConfig
+  );
+
+  // Edge uses a different technique (protocol vs executable)
+  if (argv.browser === 'edge') {
+    const edge = 'microsoft-edge:';
+    argv.browser = undefined;
+    hostUrl = edge + hostUrl;
+    localUrl = edge + localUrl;
+  }
+
+  // Browser defaults to launching host
+  argv.launch = argv.launch || 'host';
+
+  switch (argv.launch) {
+    case 'local':
+
+      // Only adding queryStringBase to the message + local url opened,
+      // Meaning doesn't need those to communicate back to localhost
+      localUrl += queryStringBase;
+
+      logger.info(`Launching Local URL: ${localUrl}`);
+      open(localUrl, argv.browser);
+    break;
+    case 'host':
+      logger.info(`Launching Host URL: ${hostUrl}`);
+      open(hostUrl, argv.browser);
+    break;
+  }
+}
+
+module.exports = browser;

cli/utils/server.js

@@ -0,0 +1,73 @@
+/*jslint node: true */
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const logger = require('winston');
+const portfinder = require('portfinder');
+const express = require('express');
+const https = require('https');
+const cors = require('cors');
+
+const app = express();
+
+let server;
+
+/**
+ * Starts the httpServer
+ * @name start
+ */
+function start(root) {
+  return new Promise((resolve, reject) => {
+
+    const dist = path.resolve(process.cwd(), 'dist');
+
+    logger.info('Creating web server');
+    app.use(cors());
+
+    logger.info(`Exposing static directory: ${dist}`);
+    app.use(express.static(dist));
+    if (root) {
+      logger.info(`Mapping server requests from ${root} to ${dist}`);
+      app.use(root, express.static(dist));
+    }
+
+    const options = {
+      cert: fs.readFileSync(path.resolve(__dirname, '../../ssl/server.crt')),
+      key: fs.readFileSync(path.resolve(__dirname, '../../ssl/server.key'))
+    };
+
+    server = https.createServer(options, app);
+    server.on('error', reject);
+
+    logger.info('Requesting open port...');
+    portfinder
+      .getPortPromise()
+      .then(port => {
+        logger.info(`Open port found: ${port}`);
+        logger.info('Starting web server...');
+        server.listen(port, 'localhost', () => {
+          logger.info('Web server running.');
+          resolve(port);
+        });
+      })
+      .catch(reject);
+  });
+}
+
+/**
+ * Kills the server if it exists
+ * @name kill
+ */
+function stop() {
+  if (server) {
+    logger.info('Stopping http server');
+    server.close();
+    server = null;
+  }
+}
+
+module.exports = {
+  start: start,
+  stop: stop
+};

cli/utils/stage-library-ts.js

@@ -66,10 +66,10 @@ function getFileContents(filePath) {
   switch (path.extname(filePath)) {
     case '.scss':
       contents = compileSass(filePath);
-      break;
+    break;
     case '.html':
       contents = getHtmlContents(filePath);
-      break;
+    break;
   }
 
   contents = contents