Live CSS / view reloading

Updated . Posted . Visible to the public. Deprecated.

If you use Webpacker, you do not need dedicated livereload, since the webpacker-dev-server does this for you.

If you use esbuild, [see our guide for that].(https://makandracards.com/makandra/612859-livereload-+-esbuild)

If you use Sprockets this might or might not still work.

Next time you have to do more than trivial CSS changes on a project, you probably want to have live CSS reloading, so every time you safe your css, the browser updates automatically. It's pretty easy to set up and will safe you a lot of time in the long run. It will also instantly reload changes to your html views.

Simply follow the instructions below, taken from blog.55minutes.com Show archive.org snapshot .

Install CSS live reload (only once per project)

  1. Add this to your Gemfile in the :development group:

    gem 'guard-livereload', :require => false
    gem 'rack-livereload'
    
  2. Run bundle install.

  3. Add the middleware, by adding the following to your config/environments/development.rb:

    config.middleware.insert_after(ActionDispatch::Static, Rack::LiveReload)
    
  4. Run guard init livereload.

  5. Restart your server.

Use CSS live reload

Run guard -P livereload in a console, and keep it open. Now CSS changes should be instantly pushed to your browser.

Notes for Ruby 1.8.7 projects

I had some issues where newer versions of guard wouldn't see file changes in an Ruby 1.8.7 project. After some experiments the following versions of guard und guard-livereload worked for me:

gem 'guard', '=1.8.1'
gem 'guard-livereload', '=1.4.0', :require => false

Notes for Rails 2.3 projects

On Rails 2.3, you need to add the middleware like this:

# config/environments/development.rb

require 'rack-livereload'
config.middleware.use ::Rack::LiveReload

Issues

When you run into Listen error: unable to monitor directories for changes you may fix it by increasing the amount of inotify watchers Show archive.org snapshot with

sudo sysctl fs.inotify.max_user_watches=100000
echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p
Tobias Kraze
Last edit
Henning Koch
Attachments
License
Source code in this card is licensed under the MIT License.
Posted by Tobias Kraze to makandra dev (2013-07-05 13:55)