August 8, 2018

150 words 1 min read



Stop reloading your browser by hand anytime your css, js or template re-renders. Try using Browsersync.  I really started loving this tool. Everytime your sass or js gets compiled or you simply changed one thing in your template, browsersync detects the file change and simply reloads your page. One nice extra is that css is reloaded without reloading the complete page.

To use it just install it via npm:

npm install -g browser-sync

I just created a small helper script for my Silverstripe projects, but you could simply change the folder and use it with everything else:

sudo nano /usr/local/bin/syncme
#! /bin/bash

browser-sync start --proxy $1 --files "htdocs/assets"
sudo chmod +x /usr/local/bin/syncme

Now I only have to run:

syncme http://myproject.local:8080

and browser sync will automatically open my browser with the page and handle all reloads, so I no longer need to refresh the page on my second monitor while coding.