Using the original URL, not proxy, with browser-sync

Question

Recently switched from Grunt.js to Gulp.js as multiple people told me how much better and faster it wa (it's true!). I have added BrowserSync to my Gulpfile.js, making it easier to test on multiple devices. It works great and was simple to setup. For context, I develop WordPress sites for 95% of my working time, and run them on an Apache Virtual Host, with Multisite enabled, and have lots of local sub-domains set up for each client, e.g site1.domain.dev, site2.domain.dev, etc. This works great, and I have been doing it this way for a couple of years now. However, because BrowserSync needs to create a proxy to my site so it's able to sync and inject the CSS, the site currently running through BrowserSync is routed to http://localhost:3000. This is fine and I understand why it needs to happen, but it messes with WordPress a bit (as the URL isn't the same etc), plus I'm a big TypeKit/Cloud fonts user, which means that because the site is being routed through to localhost, none of the fonts are loaded. Of course, I could just add http://localhost:3000 to the list of domains for each site on TypeKit, but this feels like a bit of a workaround and was wondering if there's a better way to do it.

I have added in the BrowserSync part of my Gulpfile.js:

gulp.task('serve', function() {
    browserSync({
        proxy: 'site1.domain.dev'
    });

    gulp.watch('assets/styles/source/**/*.scss', ['styles']);
    gulp.watch('*.php', reload);
    gulp.watch('assets/js/source/*.js', ['scripts']);
    gulp.watch('assets/js/plugins/**/*.js', ['plugins']);
});

So my question is, would it be possible for BrowserSync to go directly to my URL (http://site1.domain.dev) instead of routing it though http://localhost:3000? As an added bonus, it would be awesome if the domain could be removed from the BrowserSync proxy property, as I use an automation script to set up a new site on my WP Multisite installation and don't really want to have to edit my gulpfile everytime I set up a new site.

Thanks for the help! :)

Answer 1

For me, it worked by specifying host and then open: 'external', like this:

browserSync.init({
  proxy: 'http://myproject.dev/',
  host: 'myproject.dev',
  open: 'external'
});