feature: support overriding host name on au run, and e2e tests

build/tasks/release-checks/suite-steps.js

@@ -65,6 +65,8 @@ module.exports = function(suite) {
 
   if (applicable(features, 'webpack')) {
     steps.push(
+      new tests.webpack.AuBuildDoesNotThrowCommandLineErrors(),
+      new tests.webpack.AuBuildStartsWebpackInWatchMode(),
       new tests.webpack.AuRunDoesNotThrowCommandLineErrors(),
       new tests.webpack.AuRunLaunchesServer(),
       new tests.webpack.AuRunRendersPage(),

build/tasks/release-checks/tasks/check-javascript-errors.js

@@ -1,6 +1,5 @@
 const Task = require('./task');
 const puppeteer = require('puppeteer');
-const { killProc } = require('../utils');
 const PUPPETEER_TIMEOUT = 5000;
 
 module.exports = class CheckJavascriptErrors extends Task {
@@ -42,11 +41,6 @@ module.exports = class CheckJavascriptErrors extends Task {
     });
   }
 
-  stop() {
-    this.resolve();
-    killProc(this.proc);
-  }
-
   getTitle() {
     return super.getTitle() + ` (url: ${this.url})`;
   }

build/tasks/release-checks/tasks/execute-command.js

@@ -1,5 +1,4 @@
 const Task = require('./task');
-const { killProc } = require('../utils');
 const { spawn } = require('child_process');
 const os = require('os');
 
@@ -24,8 +23,9 @@ module.exports = class ExecuteCommand extends Task {
 
   execute() {
     this.proc = spawn(this.command, this.parameters);
-    this.promise = new Promise((resolve) => {
+    this.promise = new Promise((resolve, reject) => {
       this.resolve = resolve;
+      this.reject = reject;
     });
 
     this.proc.stdout.on('data', (data) => {
@@ -62,11 +62,6 @@ module.exports = class ExecuteCommand extends Task {
     return this.execute();
   }
 
-  stop() {
-    this.resolve();
-    killProc(this.proc);
-  }
-
   getTitle() {
     return super.getTitle() + ` (command: ${this.command} ${this.parameters.join(' ')})`;
   }

build/tasks/release-checks/tasks/take-screenshot-of-page.js

@@ -1,6 +1,5 @@
 const Task = require('./task');
 const puppeteer = require('puppeteer');
-const { killProc } = require('../utils');
 const PUPPETEER_TIMEOUT = 5000;
 
 module.exports = class TakeScreenShotOfPage extends Task {
@@ -38,11 +37,6 @@ module.exports = class TakeScreenShotOfPage extends Task {
     });
   }
 
-  stop() {
-    this.resolve();
-    killProc(this.proc);
-  }
-
   getTitle() {
     return super.getTitle() + ` (url: ${this.url})`;
   }

build/tasks/release-checks/tasks/task.js

@@ -1,4 +1,5 @@
 const Step = require('../step');
+const kill = require('tree-kill');
 
 module.exports = class Task extends Step {
   constructor(title) {
@@ -13,4 +14,14 @@ module.exports = class Task extends Step {
   getTitle() {
     return `[TASK] ${this.title}`;
   }
+
+  stop() {
+    kill(this.proc.pid, err => {
+      if (err) {
+        this.reject && this.reject(err);
+      } else {
+        this.resolve && this.resolve();
+      }
+    });
+  }
 };

build/tasks/release-checks/tests/webpack/au-build.js

@@ -0,0 +1,64 @@
+const Test = require('../test');
+const ExecuteCommand = require('../../tasks/execute-command');
+const path = require('path');
+const fs = require('fs');
+
+class AuBuildDoesNotThrowCommandLineErrors extends Test {
+  constructor() {
+    super('au build does not throw commandline errors');
+  }
+
+  onOutput(message) {
+    this.debug(message);
+
+    if (message.toLowerCase().indexOf('error') > -1) {
+      this.executeCommand.stop();
+      this.fail();
+    } else if (isBuildCompletedMessage(message)) {
+      this.success();
+      this.executeCommand.stop();
+    }
+  }
+
+  execute() {
+    this.executeCommand = new ExecuteCommand('au', ['build'], (msg) => this.onOutput(msg));
+    return this.executeCommand.executeAsNodeScript();
+  }
+}
+
+class AuBuildStartsWebpackInWatchMode extends Test {
+  constructor(fileToChange) {
+    super('au build --watch starts webpack in watch mode');
+
+    this.fileToChange = fileToChange || path.join('src', 'app.html');
+    this.firstBuildCompleted = false;
+  }
+
+  onOutput(message) {
+    this.debug(message);
+
+    if (message.toLowerCase().indexOf('error') > -1) {
+      this.executeCommand.stop();
+      this.fail();
+    } else if (message.indexOf('webpack is watching the files') > -1) {
+      this.success();
+      this.executeCommand.stop();
+    }
+  }
+
+  execute(context) {
+    this.context = context;
+
+    this.executeCommand = new ExecuteCommand('au', ['build', '--watch'], (msg) => this.onOutput(msg));
+    return this.executeCommand.executeAsNodeScript();
+  }
+}
+
+function isBuildCompletedMessage(msg) {
+  return msg.indexOf('Built at') > -1;
+}
+
+module.exports = {
+  AuBuildDoesNotThrowCommandLineErrors,
+  AuBuildStartsWebpackInWatchMode
+};

build/tasks/release-checks/tests/webpack/index.js

@@ -1,3 +1,4 @@
 module.exports = {
-  ...require('./au-run')
+  ...require('./au-run'),
+  ...require('./au-build')
 };

lib/build/webpack-reporter.js

@@ -3,7 +3,6 @@ module.exports = function reportReadiness(options) {
   const yargs = require('yargs');
   const argv = yargs.argv;
   argv.color = require('supports-color');
-  const open = require('open');
   const useColor = argv.color;
 
   let startSentence = `Project is running at ${colorInfo(useColor, uri)}`;
@@ -23,12 +22,6 @@ module.exports = function reportReadiness(options) {
   if (options.historyApiFallback) {
     console.log(`404s will fallback to ${colorInfo(useColor, options.historyApiFallback.index || '/index.html')}`);
   }
-
-  if (options.open) {
-    open(uri).catch(function() {
-      console.log('Unable to open browser. If you are running in a headless environment, please do not use the open flag.');
-    });
-  }
 };
 
 function createDomain(opts) {

lib/dependencies.json

@@ -4,6 +4,7 @@
   "@types/lodash": "^4.14.117",
   "@types/node": "^10.11.6",
   "@types/webpack": "^4.4.15",
+  "app-settings-loader": "^1.0.2",
   "aspnet-webpack": "^3.0.0",
   "aurelia-animator-css": "^1.0.4",
   "aurelia-bootstrapper": "^2.3.2",

lib/index.ts

@@ -8,3 +8,5 @@ exports.ProjectItem = require('./project-item').ProjectItem;
 exports.build = require('./build');
 exports.Configuration = require('./configuration').Configuration;
 exports.reportWebpackReadiness = require('./build/webpack-reporter');
+exports.NPM = require('./package-managers/npm').NPM;
+exports.Yarn = require('./package-managers/yarn').Yarn;

lib/package-managers/base-package-manager.js

@@ -7,10 +7,14 @@ exports.BasePackageManager = class {
   }
 
   install(packages = [], workingDirectory = process.cwd(), command = 'install') {
+    return this.run(command, packages, workingDirectory);
+  }
+
+  run(command, args = [], workingDirectory = process.cwd()) {
     return new Promise((resolve, reject) => {
       spawn(
         this.getExecutablePath(workingDirectory),
-        [command, ...packages],
+        [command, ...args],
         { stdio: 'inherit', cwd: workingDirectory }
       )
         .on('close', resolve)

package.json

@@ -61,12 +61,11 @@
     "gulp": "^4.0.2",
     "htmlparser2": "^3.10.1",
     "lead": "^1.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.14",
     "map-stream": "0.0.7",
     "mkdirp": "^0.5.1",
     "node-libs-browser": "^2.2.1",
     "npm-which": "^3.0.1",
-    "open": "^6.4.0",
     "preprocess": "^3.1.0",
     "pumpify": "^2.0.0",
     "querystring-es3": "1.0.0-0",
@@ -96,6 +95,7 @@
     "nyc": "^14.1.1",
     "puppeteer": "^1.19.0",
     "rimraf": "^2.6.3",
+    "tree-kill": "^1.2.1",
     "ts-node": "^8.3.0",
     "typescript": "^3.5.3",
     "yargs": "^13.3.0"

skeleton/cli-bundler/README.md

@@ -8,10 +8,14 @@ To open browser automatically, do `au run --open`.
 
 To change dev server port, do `au run --port 8888`.
 
+To change dev server host, do `au run --host 127.0.0.1`
+
 // @if feat.babel
 To install new npm packages automatically, do `au run --auto-install`
 // @endif
 
+**PS:** You could mix all the flags as well, `au run --host 127.0.0.1 --port 7070 --open`
+
 // @if !feat.plugin
 ## Build for production
 

skeleton/cli-bundler/aurelia_project/aurelia.json

@@ -94,13 +94,16 @@
   "platform": {
     // @if feat.web
     "port": 9000,
+    "host": "localhost",
+    "open": false,
     "index": "index.html",
     "baseDir": ".",
     "output": "scripts",
     // @endif
 
     // @if feat['dotnet-core']
     "port": 5000,
+    "host": "localhost",
     "index": "wwwroot/index.html",
     "baseDir": "./wwwroot",
     "baseUrl": "scripts",

skeleton/cli-bundler/aurelia_project/tasks/run.ext

@@ -14,13 +14,17 @@ import {CLIOptions} from 'aurelia-cli';
 import build from './build';
 import watch from './watch';
 
+// recommended: https://www.browsersync.io/docs/api#api-create
+const bs = browserSync.create();
+
 let serve = gulp.series(
   build,
   done => {
-    browserSync({
+    bs.init({
       online: false,
-      open: CLIOptions.hasFlag('open'),
+      open: CLIOptions.hasFlag('open') || project.platform.open,
       port: CLIOptions.getFlagValue('port') || project.platform.port,
+      host: CLIOptions.getFlagValue('host') || project.platform.host || "localhost",
       logLevel: 'silent',
       server: {
         baseDir: [project.platform.baseDir],
@@ -32,6 +36,12 @@ let serve = gulp.series(
     }, function (err, bs) {
       if (err) return done(err);
       let urls = bs.options.get('urls').toJS();
+      let host = bs.options.get('host');
+      let port = bs.options.get('port');
+
+      if( host !== "localhost" )
+        log(`Application Available At: http://${host}:${port}`);
+
       log(`Application Available At: ${urls.local}`);
       log(`BrowserSync Available At: ${urls.ui}`);
       done();
@@ -48,9 +58,17 @@ function reload() {
   browserSync.reload();
 }
 
-let run = gulp.series(
+const run = gulp.series(
   serve,
   done => { watch(reload); done(); }
 );
 
-export default run;
+const shutdownAppServer = (code) =>{
+  return new Promise(resolve => {
+    bs.exit();
+    process.exit(code || 0);
+    resolve();
+  });
+};
+
+export { run as default , shutdownAppServer };

skeleton/cli-bundler/aurelia_project/tasks/run.json

@@ -19,6 +19,11 @@
       "type": "boolean"
     },
     // @endif
+    {
+      "name": "host",
+      "description": "Set host address of the dev server, the accessible URL",
+      "type": "string"
+    },
     {
       "name": "port",
       "description": "Set port number of the dev server",

skeleton/common/config/environment.json

@@ -0,0 +1,4 @@
+{
+  "debug": true,
+  "testing": true
+}

skeleton/common/config/environment.production.json

@@ -0,0 +1,4 @@
+{
+  "debug": false,
+  "testing": false
+}

skeleton/common/tsconfig.json__if_typescript

@@ -32,10 +32,8 @@
     "types": ["node", "jest"],
     // @endif
 
-    // @if feat.webpack && feat['postcss-typical'] && feat.protractor
     "typeRoots": ["./node_modules/@types"],
-    // @endif
-
+
     "removeComments": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -44,6 +42,7 @@
     "lib": ["es2015", "dom"],
     "moduleResolution": "node",
     "baseUrl": "src",
+    "resolveJsonModule": true,
 
     // @if feat.plugin
     "paths": { "resources": [ "" ] },