BrowserSync doesn't work with a proxy (Mamp / Gulp)

[davidhellmann]

BrowserSync doesn't work with a proxy since today. Also older projects doesn't work and I've no idea whats wrong. Without Proxy via localhost:3000 all is fine but when I add a proxy: "testprototyping.dev" it doesn't works. In the Chrome DevTools is this:

Failed to load resource: the server responded with a status of 404 (Not Found) http://testprototyping.dev:3000/browser-sync/browser-sync-client.2.11.11.js

No Idea what's wrong. The proxy is listed in mamp pro.

• Browsersync [ 2.11.11 ]
• Node [ v4.2.1 ]
• Npm [ 2.14.7 ]

  Affected platforms

• [ x ] OS X

  Browsersync use-case

• [ x ] Gulp

  for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

{Browsersync init code here}

import config from '../../config.json';
import gulp from 'gulp';
import browserSync from 'browser-sync';

const browserSyncTask = () => {

  // Build a condition when Proxy is active
  var bsProxy, bsServer;

  // Condition for Proxy
  if(config.browsersync.proxy) {
    bsProxy = config.browsersync.proxy;
    bsServer = false;
  } else {
    bsProxy = false;
    bsServer = { baseDir : config.dist.browserSyncDir};
  }

  // Browser Sync
  browserSync.init([
      config.dist.markup     + '**/*.{html,php,twig}',
      config.dist.images     + '**/*.{jpg,jpeg,webp,gif,png,svg}',
      config.dist.css        + '**/*.css',
      config.dist.js         + '**/*.js'
    ],
    {
      options: {
        debugInfo: true,
        watchTask: true,
        proxy: bsProxy,
        ghostMode: {
          clicks : true,
          scroll : true,
          links  : true,
          forms  : true
        }
      },
      notify: {
        styles: [
          'padding: 10px 20px;',
          'font-family: arial;',
          'line-height: 1',
          'position: fixed;',
          'font-size: 10px;',
          'font-weight: bold',
          'z-index: 9999;',
          'top: inherit',
          'border-radius: 0',
          'right: 0;',
          'bottom: 0;',
          'color: #fff;',
          'background-color: rgba(0,0,0, .5)',
          'text-transform: uppercase'
        ]
      },
      server: bsServer,
      open: config.browsersync.openbrowser
    });
}

gulp.task('browser-sync', browserSyncTask);

module.exports = { browserSyncTask }

[shakyShane]

Just clear your browser cache - when an updated version is released your html may be cached which is pointing to a version not installed :)

[marcnischan]

I had the same problem. Wordpress on MAMP. browserSync.stream didn't do anything. I tried a bunch of stuff from the forums and nothing worked. I changed browserAutoOpen to "true" and that fixed it. The weird thing is that it uses localhost:3000 instead of my MAMP host name. But I'm OK with it because it works now.