feat(project): replace livereload with browser-sync

Closes #1955

Author: Koslun

templates/app/_package.json

@@ -65,6 +65,8 @@
     "babel-core": "^6.6.5",
     "babel-eslint": "^6.0.4",
     "babel-register": "^6.6.5",
+    "browser-sync": "^2.8.0",
+    "bs-fullscreen-message": "^1.0.0",
     <%_ if(filters.flow) { -%>
     "flow-bin": "^0.27.0",
     "babel-plugin-syntax-flow": "^6.8.0",
@@ -92,7 +94,6 @@
     "gulp-inject": "^4.0.0",
     "gulp-istanbul": "~0.10.3",
     "gulp-istanbul-enforcer": "^1.0.3",
-    "gulp-livereload": "^3.8.0",
     "gulp-load-plugins": "^1.0.0-rc.1",
     "gulp-clean-css": "^2.0.6",
     "gulp-mocha": "^2.1.3",
@@ -159,7 +160,6 @@
     <%# END WEBPACK %>
     "through2": "^2.0.1",
     "open": "~0.0.4",
-    "connect-livereload": "^0.5.3",
     "istanbul": "~0.4.1",
     "chai": "^3.2.0",
     "sinon": "^1.16.1",
@@ -182,6 +182,7 @@
     "jasmine-spec-reporter": "^2.4.0",<% } %>
     "phantomjs-prebuilt": "^2.1.4",
     "proxyquire": "^1.0.1",
+    "strip-ansi": "^3.0.1",
     "supertest": "^1.1.0"<% if(filters.ts) { %>,
     "tslint": "^3.5.0",
     "typings": "^0.8.1"<% } %>

templates/app/gulpfile.babel.js

@@ -229,8 +229,7 @@ gulp.task('webpack:dev', function() {
     return gulp.src(webpackDevConfig.entry.app)
         .pipe(plugins.plumber())
         .pipe(webpack(webpackDevConfig))
-        .pipe(gulp.dest('.tmp'))
-        .pipe(plugins.livereload());
+        .pipe(gulp.dest('.tmp'));
 });
 
 gulp.task('webpack:dist', function() {
@@ -311,7 +310,7 @@ gulp.task('clean:tmp', () => del(['.tmp/**/*'], {dot: true}));
 
 gulp.task('start:client', cb => {
     whenServerReady(() => {
-        open('http://localhost:' + config.port);
+        open('http://localhost:' + config.browserSyncPort);
         cb();
     });
 });
@@ -347,12 +346,9 @@ gulp.task('start:server:debug', () => {
 gulp.task('watch', () => {
     var testFiles = _.union(paths.client.test, paths.server.test.unit, paths.server.test.integration);
 
-    plugins.livereload.listen();
-
     plugins.watch(_.union(paths.server.scripts, testFiles))
         .pipe(plugins.plumber())
-        .pipe(lintServerScripts())
-        .pipe(plugins.livereload());
+        .pipe(lintServerScripts());
 
     plugins.watch(_.union(paths.server.test.unit, paths.server.test.integration))
         .pipe(plugins.plumber())

templates/app/server/config/environment/index.js

@@ -19,6 +19,9 @@ var all = {
   // Root path of server
   root: path.normalize(`${__dirname}/../../..`),
 
+  // Browser-sync port
+  browserSyncPort: process.env.BROWSER_SYNC_PORT || 3000,
+
   // Server port
   port: process.env.PORT || <%= devPort %>,
 

templates/app/server/config/express.js

@@ -25,6 +25,9 @@ var MongoStore = connectMongo(session);<% } else if(filters.sequelize) { %>
 import sqldb from '../sqldb';
 import expressSequelizeSession from 'express-sequelize-session';
 var Store = expressSequelizeSession(session.Store);<% } %>
+import stripAnsi from 'strip-ansi'; 
+ 
+var browserSync = require('browser-sync').create(); 
 
 export default function(app) {
   var env = app.get('env');
@@ -93,52 +96,43 @@ export default function(app) {
     const webpackConfig = makeWebpackConfig({ DEV: true });
     const compiler = webpack(webpackConfig);
 
-    const pkgConfig = require('../../package.json');
-    const livereloadServer = require('tiny-lr')();
-    var livereloadServerConfig = {
-      ignore: [
-        /^\/api\/(.*)/,
-        /\.js(\?.*)?$/, /\.css(\?.*)?$/, /\.svg(\?.*)?$/, /\.ico(\?.*)?$/, /\.woff(\?.*)?$/,
-        /\.png(\?.*)?$/, /\.jpg(\?.*)?$/, /\.jpeg(\?.*)?$/, /\.gif(\?.*)?$/, /\.pdf(\?.*)?$/
-        ],
-      port: (pkgConfig.livereload || {}).port
-    };
-    var triggerLiveReloadChanges = function() {
-      livereloadServer.changed({
-        body: {
-          files: [webpackConfig.output.path + webpackConfig.output.filename]
-        }
-      });
-    };
-    if(livereloadServerConfig.port) {
-      livereloadServer.listen(livereloadServerConfig.port, triggerLiveReloadChanges);
-    } else {
-      /**
-       * Get free port for livereload
-       * server
-       */
-      livereloadServerConfig.port = require('http').createServer().listen(function() {
-        /*eslint no-invalid-this:0*/
-        this.close();
-        livereloadServer.listen(livereloadServerConfig.port, triggerLiveReloadChanges);
-      }).address().port;
-    }
-
     /**
-     * On change compilation of bundle
-     * trigger livereload change event
+     * Run Browsersync and use middleware for Hot Module Replacement
      */
-    compiler.plugin('done', triggerLiveReloadChanges);
-
-    app.use(webpackDevMiddleware(compiler, {
-      stats: {
-        colors: true,
-        timings: true,
-        chunks: false
-      }
-    }));
+    browserSync.init({
+      open: false,
+      logFileChanges: false,
+      proxy: 'localhost:' + config.port,
+      ws: true,
+      middleware: [
+        webpackDevMiddleware(compiler, {
+          noInfo: false,
+          stats: {
+            colors: true,
+            timings: true,
+            chunks: false   
+          }
+        })
+      ],
+      port: config.browserSyncPort,
+      plugins: ['bs-fullscreen-message']
+    });
 
-    app.use(require('connect-livereload')(livereloadServerConfig));
+    /**
+     * Reload all devices when bundle is complete
+     * or send a fullscreen error message to the browser instead
+     */
+    compiler.plugin('done', function (stats) {
+      console.log('webpack done hook');
+        if (stats.hasErrors() || stats.hasWarnings()) {
+            return browserSync.sockets.emit('fullscreen:message', {
+                title: "Webpack Error:",
+                body:  stripAnsi(stats.toString()),
+                timeout: 100000
+            });
+        }
+        browserSync.reload();
+    });
   }
 
   if ('development' === env || 'test' === env) {