Your make a change on your Drupal 8 theme and...Voila! The update's already live on the desktop, the tablet and the mobile phone that you've been simultaneously testing it on! “Pure utopia”, right? Well, not exactly! “Browsersync” is the right name for it, actually! This tool is the answer to all your prayers! The ones you made during all your discouraging, time-consuming cross-browsing testing marathons. Let's find out how precisely using BrowserSync in Drupal 8 can dramatically speed up your changes syncing up:

First things first: “What's BrowserSync more exactly?” 

And now my answer to your legitimate question: “it's a Node.js application!” First of all it's a Node.js module, before it turns into one of your most powerful tools once you start using it to streamline your browser testing workflow with!

What makes it such a huge leap into the future of changes syncing up is its functionality to run on multiple browsers, on multiple devices and thus to syncronize code changes on all of them. And not just code changes, but events, too! You move your cursor a bit to the left on your desktop site, the cursor simultaneously moves a bit to the left on all the other devices that you're testing your Drupal 8 site on!

Now that's groundbreaking! More than that: it's an indispensable tool for any Drupal developer aiming for efficiency, for.... excellency in his/her work.

“But how does it work precisely, what's the “magic trick” that's being performed in the back stage when using BrowserSync in Drupal 8?” 

No trick! Basically BrowserSync identifies all the changes in your files and promptly gives your browser window a refresh while injecting new CSS into the page. No more manual refresh on each and every one of the devices (or browsers) that your Drupal 8 website's being tested on.

“How would it work on your Drupal 8 site more precisely?” 

I'll show you! But before I break down further, I feel like mentioning that while on simple websites Browsersync runs its own local http server, on far more complex (Drupal) sites it works as a proxy server instead.

 

First: Set Up BrowserSync

Before I go on with all the steps that this quick and easy set up imply, just a quick mention: use the Node Package Manager (NPM) for setting up BrowserSync! In case you haven't yet installed Node.js, you need to rush to Nodejs.org and downloaded first.

 

1. Choose your local dev. development 

In this respect, I have 2 recommendations for you: Acquia Dev Desktop, DrupalVM and Kalabox.

 

2. Install Node

As I've already mentioned: just in case you haven't already installed Node.js. 

 

3. Next Go Ahead and Install BrowserSync

And it's “global installation” that I'm referring to (this way you won't have to get it installed each and every time you start working on a new Drupal project):

npm install browser-sync -g

Then change directories to your local (Drupal 8 website) files:

cd wherever/you/keep/your/drupal/docroot

Next get the BrowserSync “triggered”:

browser-sync start --proxy "local.dev" --files "**/*.twig, **/*.css, **/*.js”

And Voila! Now you have your BrowserSync server monitoring and ready to “detect”  all the changes that you'll make and which will impact your JS files, your Twig templates and CSS files.

Speaking of those (CSS files), a tremendous piece of news for you is that once your installed Browsersync in Drupal 8 identifies a change applied to your CSS files, it will overwrite specifically that change CSS file on the web page and re-render it.

You won't need to reload it yourself, manually, to sync up your change!

Now all there's left for you to do is to test your Browsersync installation: simply run browser-sync -h in your terminal! If you'll then be able to view all the commands, options for plugin and usage, it's the best sign that everything runs smoothly.

Tip: you could consider integrating Browswersync with your preferred task manager.

 

Ensure That Browsersync in Drupal 8 Runs At Its Full Potential 

Now that you've successfully set up Browsersync, you need to make sure that you'll be leveraging its full power on your Drupal site. That Browsersync and Drupal 8 complement each other perfectly!

In this respect, here are a few tips and tricks you could consider for making their “cohabitation” a fruitful one (for you, of course):

 

1. Turn Off Caching

This way, you'll be actually eliminating the risk of having an older version (a cached one) being served to you as you refresh the web page that you're working on. 

How you do that? Head to Disable Drupal 8 caching documentation and... enjoy the reading! Simply follow all the steps indicated to you there and you'll be turning off both your dynamic page and your render cache in no time.

With your cache turned off, once you make a change to a Twig template file you'll be able to instantly view them live, on page. No need to rebuild the cache.

Note: still, do keep in mind that once you add a new file, you do have to rebuild it (the cache).

 

2. Load CSS Files Link Tags Instead of Links Loaded With @import Tags

And this a rule of thumb that you should stick to in order to avoid the risk of having CSS files that Browsersync in Drupal 8 won't recognize.

Here's an example of “good” file format, that Browsersync will identify and properly refresh:

<link rel="stylesheet" href="/sites/.../style.css" media="all">

And now a “bad” example of CSS file, that Browsersync in Drupal 8 won't recognize:

<style>
  @import url('/sites/.../style.css');
</style>

It all goes smoothly with the “good” type of CSS files (the ones loaded via link tags) as long as you don't have more than 31 stylesheets on your Drupal 8 site. If you exceed this limit, then Drupal will automatically turn your files into @imports (the “bad example” of CSS files to load when you're using Browsersync in Drupal 8, remember?). 

And exceeding the limit of 31 is “piece of cake” in the context of a Drupal 8 site where CSS aggregation is disabled (all the modules and the base themes will be “piling up” their own loads of stylesheets).

What do you do then in order to “play by the rule of “up to 31”? Well, you have two options:

 

A. You Enable The Link CSS File Module

And you should know that this is the easy method (we'll talk about the more “challenging” one, too, in a bit).

What this module does is load all your CSS files with the link tag (by overriding your Drulal 8 site's @import workaround). And it does that irrespective of their number (which is THE real good news for you in this context).

Note: yet, you should consider this option's major drawback, too, given by the fact that the more CSS file (unaggregated CSS files) your Drupal 8 site will be forced to load, the greater the impact on its overall performance will be!

 

B. You Disable Preprocessing on Certain Files

As you probably already guess: this is the “arduous way” to deal with the CSS files' issue.

So, basically this “method” goes like this: you turn on CSS aggregation/preprocessing for your local site files, then you manually disable aggregation only for those specific files that you'll be applying changes to.

And now the “technical transcription” of the method:

a. the following, in settings.local.php, needs to be set to TRUE:

$config['system.performance']['css']['preprocess'] = TRUE;

b. next disable CSS files aggregation, in [theme_name].libraries.yml file, specifically for those files that you're applying changes to:

There are pros and cons to this solution as you surely see for yourself:

• pro: your Drupal 8 site will load considerably faster, thanks to your aggregated CSS files
   
• con: it's no doubt a bit more cumbersome to manually disable preprocessing for specific CSS files only
   

3. Add a Delay Between Browsersync identifying the change and refreshing the page

If the specific context of your Drupal web project asks for a delay between detecting the change and rendering the updated web page, this is the command that you should enter:

browser-sync start --proxy "d8.kbox.site" --files "**/*.twig, **/*.css, **/*.js" --reload-delay 1000

This way, you set up a 1 second delay between change detection and page reload.

 

And this is how you install and properly integrate Browsersync in Drupal 8! Say “Hello” to a new, greatly improved cross-browser testing type experience as a Drupal developer!

---