Welcome to the first entry in a new series on Smashing Coding called Sidenotes. Sidenotes are shorter than traditional Smashing Magazine articles and are designed to give you a quick introduction to useful tools and services. Over the next few weeks, we’ll be looking at productivity aids, useful apps, essential plugins and code examples that we think will help you in your daily coding work. If there is a tool, product or service that you think would be great to review, please do get in touch and let us know.
- Tool: LiveReload
- Description: Monitors changes in your files and automatically refreshes the browser
- Category: Developer workflow
- Price: Free
- Time to implement: 5 minutes
- OS: Mac OS X
What Does It Do?
But it really comes into its own when used in combination with things like CoffeeScript, SASS, LESS, HAML or Jade. LiveReload monitors for any changes in your files, compiles them for you and then refreshes the browser. You can also specify the destination folder for compiled files. If this isn’t your thing or you have another way of handling compilation, you can simply turn it off.
- Download LiveReload from the website, and install it.
- After launching the application, you will be asked to add the relevant browser extensions.
- Click on the LiveReload icon in the menu bar, and specify your “folders to watch.” I usually pick the project’s root folder, but you can be more specific if you wish.
- Highlight your folder to watch and click “Settings.” From here, you can enable things such as Sass compilation.
- Activate LiveReload in your browser. (In Safari, right-click and then select “Enable Live Reload.” In Chrome, click the LiveReload toolbar button.)
- Change a file and watch the browser automatically refresh.
LiveReload for Rails
- LiveReload on GitHub
- “The Story of LiveReload: The First Anniversary,” Andrey Tarantsov
An alternative approach to auto-refreshing the browser.