Browsersync – Auto Reload changes to sites

I’m a visual person so having something change when I modify is very gratifying. So it’s nice to see my changes take effect while I’m coding.
You can achieve this in various ways.
The easiest is to just use a code editor called Brackets it has a live preview mode which is nice.
But what if you don’t want to use that editor? Well there’s other tools that provide this functionality along with a GUI.
The best one I know is Codekit. It’s a fantastic tool but it costs $34.
If you’re like me and just need to reload the browser then that’s a bit much. I know it does much more but I’m not at that point yet.
With that being said I’m using Browsersync

First you need to install NPM then as mention in the Browsersync website run npm install -g browser-sync

Once you got it all installed it’s time to start it up.

I just wanted it to watch changes on html files and my css.
So here is how I got it going:

Starting Browsersync to watch specific folders.

Then it opens a browser window to the server creates and that’s it!

Leave a Reply

Your email address will not be published. Required fields are marked *