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)
-
Add this to your Gemfile in the
:developmentgroup:gem 'guard-livereload', :require => false gem 'rack-livereload' -
Run
bundle install. -
Add the middleware, by adding the following to your
config/environments/development.rb:config.middleware.insert_after(ActionDispatch::Static, Rack::LiveReload) -
Run
guard init livereload. -
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
