Read more

Live CSS / view reloading

Tobias Kraze
July 05, 2013Software engineer at makandra GmbH

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.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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
Posted by Tobias Kraze to makandra dev (2013-07-05 15:55)