Connecting to BrowserSync proxy over anything but *.dev is timing out

[JordanPak]

Issue details

Hello, Since Chrome now forces *.dev to HTTPS, I've had to change my local development URLs to *.test. However, I'm now having an issue "connection" to a proxy'd site over anything that isn't *.dev. I've switched to FireFox for testing this.

Thank you all for your time!

Steps to reproduce/test case

WORKS: npm install -g browser-sync browser-sync start --proxy "wp2.dev"

DOESN'T WORK: npm install -g browser-sync browser-sync start --proxy "wp2.test"

The BrowserSync server starts quickly (and takes the same time) in both cases; it's getting the browser to actually connect to the server that's taking forever (and timing out) in the non-.dev case.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.18.12 ]
• Node [ 6.10.3 ]
• Npm [ 3.10.10 ]

Affected platforms

• [x] linux (Ubuntu 16.04)
• [ ] windows
• [ ] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other (please specify which)

Browsersync use-case

• [ ] API
• [x] Gulp
• [ ] Grunt
• [x] CLI

If CLI, please paste the entire command

browser-sync start --proxy "wp2.test"

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

gulp:

/**
 * Gulp Tasks
 *
 * @since 1.0.0
 */

/**
 * SET BROSWERSYNC URL
 */
var bs_url = "http://wp2.test/";

/**
 * Grab gulp packages
 */
var gulp  = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    cssnano = require('gulp-cssnano'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    jshint = require('gulp-jshint'),
    stylish = require('jshint-stylish'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    bower = require('gulp-bower'),
    babel = require('gulp-babel'),
    browserSync = require('browser-sync').create();

/**
 * Compile, autoprefix, and minify SASS
 */
gulp.task('styles', function() {
    return gulp.src('./assets/scss/**/*.scss')
        .pipe(plumber(function(error) {
            gutil.log(gutil.colors.red(error.message));
            this.emit('end');
        }))
        .pipe(sourcemaps.init()) // Start Sourcemaps
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./assets/css/'))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssnano())
        .pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
        .pipe(gulp.dest('./assets/css/'))
});

/**
 * JShint, concat, and minify head JS
 */
gulp.task('site-js-head', function() {

  return gulp.src([
    './assets/js/head/*.js'
  ])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
    .pipe(concat('head.js'))
    .pipe(gulp.dest('./assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
    .pipe(gulp.dest('./assets/js'))
});

/**
 * JShint, concat, and minify foot JS
 */
gulp.task('site-js-foot', function() {

  return gulp.src([
    './assets/js/foot/*.js'
  ])
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
    .pipe(concat('foot.js'))
    .pipe(gulp.dest('./assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
    .pipe(gulp.dest('./assets/js'))
});

/**
 * BrowserSync Config
 */
gulp.task('browsersync', function() {

    // Watch files
    var files = [
        './assets/css/*.css',
        './assets/js/*.js',
        '**/*.php',
        'assets/images/**/*.{png,jpg,gif,svg,webp}'
    ];

    browserSync.init(files, {
        proxy: bs_url,
          open: false,
    });

    gulp.watch('./assets/scss/**/*.scss', ['styles']);
    gulp.watch('./assets/js/head/*.js', ['site-js-head']).on('change', browserSync.reload);
    gulp.watch('./assets/js/foot/*.js', ['site-js-foot']).on('change', browserSync.reload);
});

/**
 * Non-Browsersync JS/SASS watch
 */
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('./assets/scss/**/*.scss', ['styles']);

  // Watch js files
  gulp.watch('./assets/js/head/*.js', ['site-js-head']);
  gulp.watch('./assets/js/foot/*.js', ['site-js-foot']);
});

/**
 * Default: Run style and js tasks
 */
gulp.task('default', function() {
  gulp.start('styles', 'site-js-head', 'site-js-foot');
});

[paulgoodfield]

Having exactly the same issue. Following Chrome's recent update forcing .dev domains to https, I started using .local domains when developing. Using this type of domain for the proxy causes BrowserSync to timeout when loading any page.

[neilgee]

I am having the same issue with domains using .test by which the the browser is simply not reloading, the gulp tasks loads and watches the files correctly but doesn't reload the page...

[18:13:46] Using gulpfile ~/remote-dev/www/installex/public_html/wp-content/themes/installex/gulpfile.js
[18:13:46] Starting 'sync'...
[18:13:46] Finished 'sync' after 14 ms
[Browsersync] Proxying: http://installex.test
[Browsersync] Access URLs:
 --------------------------------------------
       Local: http://127.0.0.1.xip.io:3000
    External: http://192.168.0.11.xip.io:3000
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.11.xip.io:3001
 --------------------------------------------
[Browsersync] Watching files...
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css

The same site in a .dev domain works fine

[CHEWX]

I'm finding it super super slow since changing from .dev to .local, it's not timing out, but to load the page initially it takes about 15 seconds, as opposed to instant without BrowserSync. Once loaded then the hot-reload is quick as you'd expect.

I saw this https://stackoverflow.com/questions/24807786/browsersync-extremely-slow

This was before Chrome basically killed off .dev, but even back 4 years ago the .local domain was running slow, but we are all forced to use it now, thanks Chrome.

[shakyShane]

@CHEWX just use something other than .local

.test works

[CHEWX]

@shakyShane As a workaround I'm doing this, but just flagging the issue.

[JordanPak]

** Sorry for accidentally closing and opening -- hit the wrong button.

I'd like to note that I've tried both .test and .local and neither of them are connecting for me.

[shakyShane]

Hi everyone - I'm closing this issue as it's not directly related to Browsersync - certain OS's have issues with certain domains, and we cannot control/help with that from the Browsersync package :)

[neilgee]

hmmm - I now see it working on another .test domain on my local environment - so for me its inconsistent - will test on a number of domains and see If i can verify a pattern.