How to disable cross-device action mirroring functionality of BrowserSync? (GhostMode)

Question

Our team used the gulp-angular generator with yeoman to scaffold out our web app. It uses browsersync to handle live reloads, which we want. However, we just deployed to our development server, and now when two developers are using the gulp serve command at the same time, they both are shown the same window (i.e. one developer types on one window, it shows up in the other developer's window as well). I believe this is due to BrowserSync's cross-device testing capabilities, however I am at a loss for how to disable this feature. If anyone knows how to do this (preferably without disabling our live-reload functionality) please let me know!

Below is the code for my server.js file in the gulp folder, which is the same as the one that comes with the gulp-angular generator, so hopefully this will help some people.

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var proxyMiddleware = require('http-proxy-middleware');

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
    routes = {
      '/bower_components': 'bower_components'
    };
  }

  var server = {
    baseDir: baseDir,
    routes: routes
  };

  /*
   * You can add a proxy to your backend by uncommenting the line bellow.
   * You just have to configure a context which will we redirected and the target url.
   * Example: $http.get('/users') requests will be automatically proxified.
   *
   * For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.0.5/README.md
   */
  // server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', proxyHost: 'jsonplaceholder.typicode.com'});

  browserSync.instance = browserSync.init({
    startPath: '/',
    server: server,
    browser: browser
  });
}

browserSync.use(browserSyncSpa({
  selector: '[ng-app]'// Only needed for angular apps
}));

gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(conf.paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(conf.paths.dist, []);
});

Canal

Answer 1

Faced same problem, you can simply set ghost mode to false in init options.

     browserSync.instance = browserSync.init({
      startPath: '/',
      ghostMode: false,
      server: server,
      browser: browser
     });

no need to change in default.config.js :)

Hallvard

Thanks for your answer! This is actually the solution we settled on once we realized that if we used my first solution, we would need to manually disable ghost mode for each new project. This is definitely the way to go, thanks! – Canal

Answer 2

Sorry to answer my own question, but I found the answer a few days later and since no one has answered this yet I thought I'd post my solution.

The problem we were encountering seems to be caused by a feature in BrowserSync called "GhostMode" which mirrors click and scroll actions, as well as several form actions, across devices. Disabling this is very simple: Look for your BrowserSync config file (for me it was at root/node_modules/browser-sync/lib/default.config.js) and open that. Search in that file for something similar to the following:

ghostMode: {
    clicks: true,
    scroll: true,
    forms: {
        submit: true,
        inputs: true,
        toggles: true
    }
},

and change it so that it says ghostMode: false,

This fixed our issue and hopefully this will help others if they encounter the same problem.

Canal

Is this likely to be blown away if there's an update? – Bluhm

Answer 3

If Browsersync is launched over the command line, it'll provide two different addresses:

1. Select the address for the UI / Admin Controls

2. From there you can setup configuration settings with the UI and disable cross device mirroring

Convolution

Answer 4

In case you use the QuickStart seed to initialize your project, the settings of BrowserSync can be configured using bs-config.json file at project's root folder.

My file contains the following:

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  },
  "ghostMode": false
}

Vagus

Answer 5

Alse there there is a command line usage of ghostMode

browser-sync start --proxy [...] --files [...] --watch --ghostMode false

sync options

Lynwoodlynx

Answer 6

For JHIPSTER application just add the ghostMode: false,

 new BrowserSyncPlugin({
        ghostMode: false,
        host: 'localhost',
        port: 9000,
        proxy: {
            target: 'http://localhost:9060',
            ws: true
        }

Hakon