Jamie's Blog

Lessons from a life of startups, coding, countryside, and kids

LiveReload and HTTPS

Web developers, particularly Rails developers, are on a constant lookout for anything which makes their lives easier and their development process easier. Enter LiveReload. This little app watches for changes in a directory and reloads your web browser whenever a file is updated: Edit your CSS, save and bam! the web browser has already refreshed. Not more Cmd-R or F5 bashing.

The Problem

LiveReload really doesn’t work well with HTTPS/SSL.

LiveReload works by serving up a small javascript file which connects to the livereload app and reloads the page whenever a file is updated. BUT… uh, oh: you can’t serve up a javascript file over http into a page load over https. Also, I use lvh.me for testing with subdomains locally and that kinda messes things up too. Oh, and my Rails server is actually running inside Vagrant.

The Solution

Rack-Livereload is a neat little gem which you can add to your project to get around the SSL problems. The gem inserts a piece or Rack middleware and basically connects to the livereload app to serve up the javascript through the existing (and SSL enabled) Rails server. Hey, presto!

Another solution I had considered implementing was to use my nginx server to proxy the livereload app. i.e., load the livereload.js from the SSL-enabled web server which simply proxies the livereload app. I’m sure you could make nginx do this (maybe by default or maybe with the Lua scripting — I’m not an expert) but if you’re using Rails then the gem above works really well.