Roots Discourse

BrowserSync reload on WP save_post

#1

I had an idea which might be PR-worthy, but I could use some feedback.

Usually I develop on 3-6 devices simultaneously; my laptop, a second computer and at least one phone and iPad. BrowserSync makes this a pleasure by auto-reloading and keeping the various devices in sync. (just load my-local-ip:3000 from other devices)

Manually reloading all the other devices to see WordPress content updates was painful.

Turns out, that is pretty easy to get working. Either in a plugin or functions.php or wherever, add this:

// BrowserSync reload on post save
add_action('save_post', function() {
  $args = ['blocking' => false];
  wp_remote_get('http://10.0.2.2:3000/__browser_sync__?method=reload', $args);
} );

Here’s what I wanted to bounce off someone else:

  1. This should be locked down to development only, I’m not sure about the best Sage-y way of doing that.

  2. The ip address 10.0.2.2 is kind of magical and shouldn’t be hard coded. That address is the default gateway on Vagrant’s Ubuntu install, which can be revealed by running ip show (or for just the IP: ip route | awk '/default/ {print $3}')
    The default gateway address will likely be unchanged for everyone using Vagrant, but it still seems better to put that sort of thing in a default var somewhere.

I’ve been using this for a couple days and love it. Thoughts?

Sage 9 - Triggering a reload on post save
#2
  1. WP_ENV should always be set, so if (WP_ENV !== 'production') return; should be good.
  2. Not so sure about this. I would say that unless it’s something we can get directly from PHP like in the $_SERVER superglobal, then we can probably just hardcode it. I suppose that it could be included in lib/config.php or something, but I’m always sort of hesitant on adding something like that there just for development.
#3

This is pretty badass. Couldn’t we just do 0.0.0.0:3000 ?

#4

0.0.0.0 doesn’t work.

I’m still playing around with ways to make this work without introducing a bunch of additional settings and whatnot. Maybe something with Ansible and a dev-only env-var.

#5

First post!

I agree this is really cool. Instantly seeing basically any change (theme files and now posts and pages) I make on my site on multiple devices strewn across my desk is very awesome.

One habit I’m in is switching between page quickly (in the admin screen) to write ideas I have. Does anyone know if there is a way to get BrowserSync to send all browsers to the page that was saved automatically (rather than just a refresh command)? This way I could switch the page I’m editing frequently (which is useful if you have lots of small, interrelated pages) and preview the edits I make without touching the other browsers.

I looked through the BrowserSync docs, but haven’t seen any API call that would allow you to load a new page. Perhaps this requires an extension to BrowserSync?

Update: I know the BrowserSync UI does it (the “Sync All” buttons on the History page send all browsers to the corresponding page), but I don’t have enough experience to figure out how to implement this in WordPress.

#6

Used this in Sage 8.5.2 and replaced 10.0.2.2 with localhost and it worked as expected.
Reloads all BrowserSync instances on save.

Note: connect my Android phone through local IP adres returned by the BrowserSync command.

Edit:

I stand corrected, somehow it stopped working for me using localhost.
Solved this by using $_SERVER['SERVER_ADDR'] instead of localhost.

So my complete copy-able code is as follow:

// BrowserSync reload on post save
    add_action('save_post', function() {
      $args = ['blocking' => false];
      wp_remote_get('http://'.$_SERVER['SERVER_ADDR'].':3000/__browser_sync__?method=reload', $args);
    } );

Hope this helpes someone!