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' }); 

Answer 2

Check if it will help you. My gulpfile.js looks like this:

gulp.task('browser-sync', function () {   browserSync({     logPrefix: 'Your Project',     host: 'site1.domain.dev',     port: 3060,     open: false,     notify: false,     ghost: false,      // Change this property with files of your project     // that you want to refresh the page on changes.     files: [       'public/css/**.min.css',       'public/js/**.min.js',       'app/**/*.php',       'index.php',       '.htaccess'     ]   }); }); 

After you run Gulp, the console will show a snippet of code that you need to put in your HTML before the </body>. The version of browser-sync-client and the port you are using may be different. Note: after you insert the snippet in your code, the message will still appear. From version 1.5.2 of BrowserSync, you can disable the log snippet with logSnippet: false in your configuration.

[Your Project] Copy the following snippet into your website, just before the closing </body> tag <script type='text/javascript' id="__bs_script__">//<![CDATA[     document.write("<script async src='http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js'><\/script>".replace("HOST", location.hostname)); //]]></script>  [Your Project] Access URLs: ---------------------------------- UI: http://localhost:3060 ---------------------------------- UI External: http://site1.domain.dev:3060 ---------------------------------- [Your Project] Watching files... 

After you insert the generated snippet in your file, save the file and open the address http://site1.domain.dev without port in your browser. If everything is correct, the site will update on changes from browserSync.files.

You can add a verification to only include this snippet in development environments. For example, I using PHP and CodeIgniter in my projects, so, to include only in development environments, I do this:

<?php if (ENVIRONMENT === 'development') {     $browserSync = rtrim(base_url(), '/') . ':3060/';     $fileHeaders = @get_headers($browserSync);      if ($fileHeaders) { ?>         <script id="__bs_script__">             document.write("<script async src='http://HOST:3060/browser-sync/browser-sync-client.X.X.X.js'><\/script>".replace("HOST", location.hostname));         </script>     <?php } } ?>