When I switched over my development for WordPress to the Bedrock framework and started using the Sage starter theme a couple years ago, I've been exposed to an ever changing array of software and tools that (in most cases) improve development and the quality of my code. One such tool is Browsersync so I thought I would share a quick way to get started with this tool that will allow you to watch your changes in realtime as you code.
Before Sage 9, LiveReload was the default site preview solution in Sage. While LiveReload is a good solution, it had a downside in that you needed either install a browser plugin or you needed to add a code snippet to your project or both. This meant that the tool was limited to modern browsers and was a bit more of a hassle than Browsersync, which works in any browser without a code snippet or plugin.
To install Browsersync globally you'll need to have first installed npm:
$ npm install -g browser-sync Once installed, to run a site with an index of index.html and also compile our css in a css/ directory, we just need to run the following command:
browser-sync start --server --files "*.html, css/*.css"That will start a web server at http://localhost:3000 and automatically open your default browser. To test your site in any other browser, you can navigate to the same URL and see what your site looks like there.