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:
This should be locked down to development only, I’m not sure about the best Sage-y way of doing that.
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?
WP_ENV should always be set, so if (WP_ENV !== 'production') return; should be good.
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.
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.
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.
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).
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: