Read my book

I wrote books about Webpack and React. Check them out!

Friday, February 10, 2012

LiveReload = Instant Productivity Win

It's always fun to discover something that bumps up your productivity a notch. In this post I'm going to share one of those discoveries. I've always found it awkward to refresh browser during development. Thanks to LiveReload I don't have to do that anymore.

LiveReload - Better Than Batman and Robin
Batman and Robin by MrSchuReads (CC BY-NC-SA)

LiveReload is an OS X app (~$10). It watches the directories you give to it and then refreshes your browser if its contents get modified. In order to do this you'll need a browser plugin. You will also need to connect your browser to the host app. After this you are good to go.

What makes the app cool is that it can perform a precompilation step for your files. So if you are a CoffeeScripter, it will convert those to JavaScript. Same goes for your CSS. It is possible to implement plugins for any system that might not be supported yet.

It is also possible to run some custom script of your own before refreshing the browser. I use this to compile my project using RequireJS builder.


Apparently some people tend to favor CodeKit instead of LiveReload. This fine article has more insight on that. I'm sure there are some other alternatives out there as well. It's definitely worth your time to research and find some solution like this. The investment is bound to repay itself in form of improved productivity. Getting more done with less effort is always good.