Browser Sync over Livereload

[riyadhalnur]

• I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.

Item	Version
generator-angular-fullstack	3.7.5
Node	6.2.1
npm	3.9.3
Operating System	OS X 10.11.5

Item	Answer
Build Tool	Gulp

Browser sync is a better alternative to live reloading webpages over Livereload. There are quite a few features that browser sync has over LR, but most importantly, it's fast! I have replaced livereload with browser sync for all projects since last year.

[Koslun]

Any particular benchmark or experience you can re-tell to back up the performance claim? Not that I don't think browser sync is fast, just that I don't know for certain that livereload is particularly slower or faster than browser sync.

What has however intrigued me the most about browser sync are the features you mentioned. In particular the fast cross-device testing it enables when you control several browsers at once. So definitely positively inclined towards switching to browser sync.

[riyadhalnur]

I don't have formal benchmarks but from experience I can say that browser sync has been way faster than livereload for me in terms of hot reloading whenever I have pressed Cmd + S. Another thing I particularly like is set up is relatively easier.

[Koslun]

Will probably not look into replacing live-reload with browser-sync until after the Angular 2 migration along with Angular 2 features like Angular Universal are in place.

You are however welcome to submit a PR to the webpack branch now or canary branch once #1971 has been merged into canary (planned for this week). Would entail changing here: https://github.com/angular-fullstack/generator-angular-fullstack/blob/webpack/templates/app/server/config/express.js#L89-L142

[riyadhalnur]

Cheers. Will look into it.

[macneib]

after using BrowserSync this week, I've come to like it very much.

Here's my snippet /w browser-sync-spa

var gulp = require('gulp');
var browserSync = require('browser-sync');
var spa         = require("browser-sync-spa");
var config = require('../../config').browsersync.development;

/**
 * Run the build task and start a server with BrowserSync
 */
gulp.task('browser-sync', function () {
  browserSync.use(spa({
    selector: "[ng-app]",
    history: {
      index: '/index.html'
    }
  }));

  browserSync(config);
});

and here's the config I've been working with.

module.exports = {
  browsersync: {
    development: {
      server: {
        baseDir: development
      },
      options: {
            proxy: "localhost:9000",
            ws: true
        },
      port: 3000,
      files: [
        development + '/**/*.js',
        developmentAssets + '/images/**'
      ]
    }
  }
// !snip
}

and is then used with ts, templates, sass, and html tasks.

var browserSync = require('browser-sync');
//!snip
gulp.task('sass', function () {
  return gulp.src(config.source)
    .pipe(debug())
    .pipe(globbing({
      extensions: ['.scss']
    }))
    .pipe(debug())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(config.dest))
    .pipe(debug())
    .pipe(browserSync.stream());
});
//!snip

[Koslun]

Made another solution to adapt it to the webpack solution we've got working here. So will submit a PR soonish. Currently not using browser-sync-spa or history-fallback-api, just doing a proxy on to the server which in turn serves all the files.

[Koslun]

PR merged into canary, i.e. version 4 of the generator. See PR #2073.

For any improvements such as changing the config, port or something please open up a new issue.