Slow Page Refreshes Getting you Down? 3 Free Ways to Turbocharge your Dev Workflow with Browser Syncing
Tags: wordpress, webdev, vscode, productivity
Published: 2019-12-25 15:21:25

<a name="static"></a>

## Method 1 - Static Sites [<a href="#static">#</a>]

For straight up HTML, CSS, and JavaScript, I use **Visual Studio (VS) Code** with the _Live Server_ extension by [Ritwick Dey](https://github.com/ritwickdey). 

Install the _Live Server_ extension. Bring up your VS Code workspace. Right click on your `index.html` (or any HTML file). Select "Open with Live Server." Pretty easy.

![Live Demo Gif of Live Server](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-explorer-menu-demo-1.gif "Gif courtesy of the _Live Server_ extension page.")

<a name="jekyll"></a>

## Method 2 - Jekyll [<a href="#jekyll">#</a>]

Since December 2017 with Jekyll 3.7, you can run `jekyll serve` with the `livereaload` switch. It's that easy.

`bundle exec jekyll serve --livereload` 

Done!

![Jekyll Live Reload Demo](https://thepracticaldev.s3.amazonaws.com/i/jh0r7xkcfu5zazmznyi6.gif "Jekyll Live Reload Demo")

<a name="wordpress"></a>

## Method 3 - WordPress [<a href="#wordpress">#</a>]

No lie. It's going to take a bit more work to set up a live browser refresh with WordPress. Btw, I'm running Local by Flywheel (no affiliation).

![Trigger Browsersync Demo](https://thepracticaldev.s3.amazonaws.com/i/pg287l3nv6jh1156nwn7.gif "Trigger Browsersync Demo")

### Two Main Requirements

1. Reload the browser on PHP and CSS file changes (we'll use Browsersync and Gulp for this)
2. Reload the browser when posts and pages are updated (we'll use Browsersync and the _Trigger Browsersync plugin_ to handle this)

#### Browsersync

The **critical** tool for making all this magic happen is something called [Browsersync](https://www.browsersync.io/). Browsersync's tag line is,

> Time-saving synchronised browser testing.

I suspect this "testing tool" _product positioning_ is the reason it was difficult for me to discover Browsersync. Just thinking out loud here. Maybe their SEO/SEM team should consider adding these keyword phrases.

1. Real time page loads
2. Real time page refreshes
3. Automatic page refresh
4. Automated development workflow
5. Live view

But, I digress. The main thing to remember is that WordPress is a dynamic site generator. That means we need to configure Browsersync to deal with this. We'll use Browsersync to run a proxy server for our dev site to handle the page refreshes.

#### Gulp - Watching our PHP and CSS Files

[Gulp](https://gulpjs.com/) is a task runner. I've read that Gulp's architecture makes [Gulp a faster alternative to Grunt](https://www.keycdn.com/blog/gulp-vs-grunt) (a Gulp competitor).

### Here's my Gulp File

```javascript
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

gulp.task('serve', function () {
    // Standard call for dynamic sites.
    browserSync.init({
        proxy: "avada.local"
    });

    // Watch PHP and CSS files.
    gulp.watch("**/*.php").on("change", reload);
    gulp.watch("**/*.css").on("change", reload);
});

/**
 * Place this file in "Local Sites/YOURSITENAMEHERE"
 * Usage: gulp serve
 */

```

#### Trigger Browsersync WordPress Plugin - Watching our Pages & Posts Updates

Thank goodness we have the [Trigger Browsersync WordPress plugin by Sami Greenbury](https://wordpress.org/plugins/trigger-browsersync/). And, I love the way it piggy backs onto Browsersync (loose coupling).

You will need to follow the install instructions carefully. I did find a [teeny bug](https://wordpress.org/support/topic/undefined-variable-emssage/) (typo) that can be easily fixed. If you run into it too, then change "emssage" to "message" on line 275 in the `trigger-browsersync.php` file.

If you have any issues at all with the set up, I highly recommend turning on your PHP debugging and telling the Trigger Browsersync plugin to log events via a filter. See my snippet of the special `mu-plugins/enable-trigger-browsersync.php` file below.

```php
<?php
add_action( 'plugins_loaded', function(){ // Trigger after the TriggerBrowsersync pluginhas loaded
	if ( class_exists( 'TriggerBrowsersync' ) ) { // Check the TriggerBrowsersync plugin loaded correctly
        // Add any configuration filters you may need here.

        // I'm going to turn on logging.
        add_filter('trigger_browsersync_log_events', '__return_true');

	// Activate the integration by creating an instance.
	new TriggerBrowsersync();
	}
} );
```

Need to read up on `mu-plugins`? [Check the Codex](https://wordpress.org/support/article/must-use-plugins/).

<a name="conclusion"></a>

## Conclusion [<a href="#conclusion">#</a>]

It's super easy and a _no brainer_ to whip up a real time feed of your dev edits if you are using 1) VS Code for your static sites or 2) Jekyll for your SSG sites.

As you probably noticed, getting a live browser sync working in your WordPress dev environment is the most challenging of the three methods described. The good/great news is&mdash;it can be done! Which makes it worthwhile IMHO.

Another huge bonus is that all the tech mentioned in this article are absolutely **free**. Please remember to support your developers.

Lastly, be sure you are comfortable with Browsersync and Gulp if you attempt the WordPress method described above.

Give me a shout if you have any questions. Good luck and happy coding (sans manual page refreshes)!