BrowserSync allows WP Rig to automatically send changes made to your theme directly to your browsers and sync them across different browsers across the network.
WP Rig ships with BrowserSync pre configured and enabled, meaning when you spin up your dev process, BrowserSync spins up the dev site in your browser, and updates automatically as you make changes.
This is incredibly useful for theme development. You don’t have to constantly refresh your browser because BrowserSync does it for you, and you can see your site live in multiple browsers on your computer and on other devices on your local network – all at the same time.
When you interact with one of those browsers, all the other browsers see the same interaction at the same time.
To get processing to work you have to configure it to talk to your local development environment. That’s done in the config.json file. Inside config.default.json you’ll see under the theme settings you have dev settings, and inside dev settings you have BrowserSync, which is set to live and then has a proxy URL and so on.
It will end up looking like this:
(If you don’t want processing to run on your site then you can set live to false. If you do that then you just don’t get BrowserSync. In some cases you don’t want to have that syncing happen because it does take some resources and take some time, and you might not need it.)
If you leave it at true, you do need to set the proxy URL and possibly the bypass port as well. The proxy URL is the URL to the current live site on your computer, that’ll be your dev site. If you are using Local, you’ll be able to find that URL under the “Overiew” tab. (It may say “Site Host” or “Site Domain”.)
The example code above has it set up to use a port because in some cases your dev site will be using a port. The easiest way to find out where your dev site currently sits is to simply enable it on your computer and visit it.
In this case, the URL is “wprig.local”:
That means I can go into config.json and just replace this sample code with wprig.local, delete the “http” part, and Ieave bypass port the way it is:
Save that, and now BrowserSync can connect directly to your local development. Spin up your native environment, and you can work in and see changes happen automatically.