Live reloading assets used to be a breeze. Not anymore, since Rails these days does a lot of funky operations on our assets, even in development. I used to use rack-livereload for its simplicity but it doesn’t seem to be working anymore for some reasons.
Currently rack-livereload embeds the script with the following address:
This obviously won’t work when using mobile or other devices over a network as the reference points to a local web server to fetch the script from. This is a big deal as I’m using livereload to get immediate feedback across all my machines when i’m developing responsive applications. My devices load the web app via a xip.io-based host and therefore fail to locate the livereload script.
What I needed is a way to fetch live reload based on the request host so I've removed rack-livereload and appended the following to my application layout (just before the closing
The next time you load the page, you should see ‘Browser connected’ in the terminal window guard is running in. Now, when we change a file, the live reload server successfully sends a message to the client:
13:40:45 - INFO - Reloading browser: /assets/application.css
Unfortunately nothing happens in the browser as Rails’ asset pipeline does some fancy operations to asset references and it causes the livereload client to fail to match the assets it needs to reload:
Notice how the assets are referenced with a
self and some digest suffixes above. Now, in order to get Rails to generate simple asset paths (as it used to), we need to turn asset digests and asset debugging mode off in development mode:
(To read more about the configuration options above, see the Rails Guides here and here) The next time you load a page in the browser, Rails will produce the following:
I'm a Ruby/JS dev/trainer with a focus on quality. An ex-Londoner, @terracycle, @ubxd, @lastfm. Follow me at http://twitter.com/attilagyorffy