Auto-refresh browser after code change using Automator (Mac OS X)

Auto refresh with Automator

Are you still using “command+R”  to refresh your browser after code changes have been made? Wouldn’t it be great to automate this routine? There are some solutions on the market including well known Livereload, Prepros App and CodeKit. But there is a totally free DIY alternative if you own a computer running Mac OS X. Follow this tutorial and never hit “command +R” again! Max OS X includes Automator – a neat automation assistant. More info about it could be found on Apple website. Using Automator, we’ll create a little tool that monitors your file system for file changes and reloads browser once changes are made. Sounds good? Let’s begin!

Requirements

All you need is a computer running Mac OS X and some basic knowledge of using a terminal.

Implementation

Please note that you can skip some steps by downloading the files, provided at the very end of this tutorial.

Step 1

Create a new directory for our application (e.g. Users/dragdropsite/autorefresh).

Step 2

Launch Terminal app from the Launchpad or, alternatively, use “command+space”, search for ‘Terminal’ and hit Enter.

Step 3

Check if brew is installed. You can use the following command for that: brew --version Brew is a package manager for Mac OS X. More info about it could be found here: http://brew.sh Brew version

Step 4

If brew is not installed, please use the following command to install it: ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" Brew install

Step 5

Install fswatch using the following command: brew install fswatch. fswatch is a small program that monitors a specified directory for file changes and executes shell command if some file in selected directory is updated.  More info about fswatch could be found here. fswatch install

Step 6

Launch Automator from the Launchpad or, alternatively, use “command+space”, search for ‘Automator’ and hit Enter.

Step 7

Create a new Automator Application. Make sure you’ve selected “Application“. Automator - create app

Step 8

Drag ‘Run Apple Script‘ action into Automator workflow and put the following code there:

on run {input, parameters}
	#Path to our Application
	set pathToApp to POSIX path of ((path to me as text) & "::")
	#Path to the folder which is monitored
	set pathToWatch to item 1 of input
	return {pathToApp, pathToWatch}
end run

Automator - create app

Step 9

Create a relevant AppleScript file depending on which browser you are using and save it to the directory created in Step 1. This script is used to refresh the browser. For Chrome - create a file ‘reloadActiveChromeTab.applescript‘ with the following content:

tell application "Google Chrome"
    reload active tab of window 1
end tell

For Firefox - create a file ‘reloadActiveFirefoxTab.applescript‘ with the following content:

tell application "Firefox"
    activate
end tell
 
tell application "System Events"
    tell process "Firefox"
        keystroke "r" using {command down}
    end tell
end tell

#tell application "Sublime Text 2"
#    activate
#end tell

For Safari - create a file ‘reloadActiveSafariTab.applescript‘ with the following content:

tell application "Safari"
    set docUrl to URL of document 1
    set URL of document 1 to docUrl
end tell

For Opera - create a file ‘reloadActiveOperaTab.applescript‘ with the following content:

tell application "Opera"
    activate
end tell

tell application "System Events" 
    tell process "Opera"
        keystroke "r" using {command down}
    end tell
end tell

#tell application "Sublime Text 2"
#    activate
#end tell

Step 10

Drag ‘Run Shell Script‘ action into Automator workflow, select Pass input ‘as arguments‘ and put the following code there (uncomment a line corresponding to your browser):

#!/bin/bash
PATH=/usr/local/bin:$PATH
export PATH
cd $1
# Uncomment the following line if you are using Chrome
#fswatch $2 "osascript reloadActiveChromeTab.applescript" &
# Uncomment the following line if you are using Firefox
#fswatch $2 "osascript reloadActiveFirefoxTab.applescript" &
# Uncomment the following line if you are using Safari
#fswatch $2 "osascript reloadActiveSafariTab.applescript" &
# Uncomment the following line if you are using Opera
fswatch $2 "osascript reloadActiveOperaTab.applescript" &

#The below code kills fswatch process once app is terminated
while true; do
    if [ $(ps aux | grep -e 'reloadApp' | grep -v grep | wc -l | tr -s "\n") -eq 0 ]; then 
        pkill fswatch
        break
    fi
    sleep 5
done

Automator - shell script

Step 11

Save the Automator application to the directory created in the Step 1. Name the application ‘reloadApp‘.

Step 12

Open the directory created in the Step 1 and drag our application (reloadApp.app) to your Dock: Drag to dock That’s it! You are now ready to boost your productivity!

Usage

Usage is really simple. Drag your the directory you would like to monitor and drop it on our reloadApp icon (in the Dock). Now directory is monitored and your browser will automatically be refreshed after some file in selected directory is changed. Drag project directory On the top of your screen you will see a cog icon. It indicates that our application is running. Cog indicator In order to terminate the application, click the cog icon and then the ‘X’ button: Stop watching

Some notes

This tool works just great and perfectly suits my needs, but there are some limitations you should be aware of:

  • Note that the ACTIVE browser tab is refreshed.
  • Name of selected directory (which is monitored) shouldn’t contain spaces.
  • Please note that it has been tested with the latest Mac OS X and web browsers only.
  • You can find it a bit annoying when using this app with Firefox or Opera as browser window pop-ups after every change. Unfortunately, I haven’t found a better solution. Please leave a comment if you know more elegant way to refresh these two browsers. You can play around with the commented code provided at the end of ‘reloadActiveFirefoxTab.applescript‘ and ‘reloadActiveOperaTab.applescript‘. This code makes your text editor active (after browser refresh). Please make sure to change ‘Sublime Text 2′ to your code editor. However, this code doesn’t work well, especially, if you are using different spaces for text editor and browser…

Download

Tutorial files could be downloaded below. Code can be found on the GitHub repository – feel free to fork and improve!

Found it useful? Spread the word!
Tweet about this on Twitter0Share on Google+5Share on LinkedIn0Share on Reddit3Share on Facebook0

Leave a comment

  • (will not be published)

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>