Slow Page Refreshes Getting you Down? 3 Free Ways to Turbocharge your Dev Workflow with Browser Syncing

Method 1 - Static Sites [#]

For straight up HTML, CSS, and JavaScript, I use Visual Studio (VS) Code with the Live Server extension by Ritwick Dey.

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.

Method 2 - Jekyll [#]

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!

Method 3 - WordPress [#]

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).

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. 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 is a task runner. I've read that Gulp's architecture makes Gulp a faster alternative to Grunt (a Gulp competitor).

Here's my Gulp File

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. 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 (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
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.

Conclusion [#]

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—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)!

Comments

[Landon Otis]

There has been an ongoing discussion throughout Local by Flywheel support forums about people having issues getting Browsersync to work, so I'm really glad to see you found a method. Can you post additional details about what configuration you used (ports, etc) to get it working? Big THANKS in advance!

[mark l chaves]

Hi Landon,

Thanks for your comment. I don't recall doing anything special except for adding a watch for CSS and PHP files in my Gulp script. This is documented above. Everything I've done to get this working is posted in the article.

Browsersync's default port is 3000. You can see that when you run Browsersync on the command line. You can obviously override this if needed.

Here's a copy of my output when I run my Gulp file. I hope it helps.

Good luck!