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

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

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

Browsersync use-case

• API
• Gulp
• Grunt
• 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]

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.