BrowserSync reload on WP save_post

sage
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?

9 Likes
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!

7

This is really cool and I might just try it next time. I do something similar but instead create a small text file with random string in the content each time save_post runs, and since the file is also being watched by browsersync, live reloading gets triggered each time the file gets updated (as a response to content changes).

8

I just wanted to add on here in case anyone else came across this thread because the process is modified in Gutenberg. I refresh on customizer, menu, page/post update with:

function boot23_browsersync_save() {
  $args = [
    'blocking' => false,
    'sslverify' => false
  ];
  $request = wp_remote_get('https://wp.macs:3000/__browser_sync__?method=reload', $args);
  error_log("response:\n" . str_replace('\"',"\n",json_encode($request, JSON_PRETTY_PRINT)));
}
add_action('rest_after_insert_page', 'boot23_browsersync_save', 10, 3);
add_action('rest_after_insert_post', 'boot23_browsersync_save', 10, 3);
add_action('customize_save_after', 'boot23_browsersync_save', 10, 3);
add_action('wp_update_nav_menu', 'boot23_browsersync_save', 10, 3);

of course you can remove the error_log :slight_smile: