How to enable automatic code reloading in Rails

Question

Is there a way to do 'hot code reloading' with a Rails application in the development environment?

For example: I'm working on a Rails application, I add a few lines of css in a stylesheet, I look at the browser to see the modified styling. As of right now I have to refresh the page with cmd-r or by clicking the refresh button.

Is there a way to get the page to reload automatically when changes are made?

This works nicely in the Phoenix web framework (and I'm sure Phoenix isn't the only framework in this feature). How could a feature like this be enabled in Ruby on Rails?

Answer 1

I am using this setup reloads all assets, js, css, ruby files

in Gemfile

group :development, :test do
  gem 'guard-livereload', '~> 2.5', require: false
end

group :development do
 gem 'listen'
 gem 'guard'
 gem 'guard-zeus'
 gem 'rack-livereload'
end

insert this in your development.rb

config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload

i have this in my guard file

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

## Uncomment and set this to only include directories you want to watch
# directories %w(app lib config test spec features) \
#  .select{|d| Dir.exists?(d) ? d : UI.warning("Directory #{d} does not exist")}

## Note: if you are using the `directories` clause above and you are not
## watching the project directory ('.'), then you will want to move
## the Guardfile to a watched dir and symlink it back, e.g.
#
#  $ mkdir config
#  $ mv Guardfile config/
#  $ ln -s config/Guardfile .
#
# and, you'll have to watch "config/Guardfile" instead of "Guardfile"

guard 'livereload' do
  extensions = {
    css: :css,
    scss: :css,
    sass: :css,
    js: :js,
    coffee: :js,
    html: :html,
    png: :png,
    gif: :gif,
    jpg: :jpg,
    jpeg: :jpeg,
    # less: :less, # uncomment if you want LESS stylesheets done in browser
  }

  rails_view_exts = %w(erb haml slim)

  # file types LiveReload may optimize refresh for
  compiled_exts = extensions.values.uniq
  watch(%r{public/.+\.(#{compiled_exts * '|'})})

  extensions.each do |ext, type|
    watch(%r{
          (?:app|vendor)
          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
           (?<ext>\.#{ext})) # matching extension (must be first encountered)
          (?:\.\w+|$) # other extensions
          }x) do |m|
      path = m[1]
      "/assets/#{path}.#{type}"
    end
  end

  # file needing a full reload of the page anyway
  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{config/locales/.+\.yml})
end

guard 'zeus' do
  require 'ostruct'

  rspec = OpenStruct.new
  # rspec.spec_dir = 'spec'
  # rspec.spec = ->(m) { "#{rspec.spec_dir}/#{m}_spec.rb" }
  # rspec.spec_helper = "#{rspec.spec_dir}/spec_helper.rb"

  # matchers
  # rspec.spec_files = /^#{rspec.spec_dir}\/.+_spec\.rb$/

  # Ruby apps
  ruby = OpenStruct.new
  ruby.lib_files = /^(lib\/.+)\.rb$/

  # watch(rspec.spec_files)
  # watch(rspec.spec_helper) { rspec.spec_dir }
  # watch(ruby.lib_files) { |m| rspec.spec.call(m[1]) }

  # Rails example
  rails = OpenStruct.new
  rails.app_files = /^app\/(.+)\.rb$/
  rails.views_n_layouts = /^app\/(.+(?:\.erb|\.haml|\.slim))$/
  rails.controllers = %r{^app/controllers/(.+)_controller\.rb$}

  # watch(rails.app_files) { |m| rspec.spec.call(m[1]) }
  # watch(rails.views_n_layouts) { |m| rspec.spec.call(m[1]) }
  # watch(rails.controllers) do |m|
  #   [
  #     rspec.spec.call("routing/#{m[1]}_routing"),
  #     rspec.spec.call("controllers/#{m[1]}_controller"),
  #     rspec.spec.call("acceptance/#{m[1]}")
  #   ]
  # end
end

I am using zeus instead of spring on this setup.

Run guard

Open localhost:3000 and you are good to go.

This should resolve your question, and have blazing reload times better than browserify.

I commented out guard looking at test directories if you want you can uncomment those lines if your are doing TDD.

Answer 2

CSS hot swapping and auto-reload when HTML/JS changes can be achieved with guard in combination with livereload: https://github.com/guard/guard-livereload

Answer 3

This gem would auto reload when you make changes to js elements(Not css or ruby files).

https://github.com/rmosolgo/react-rails-hot-loader

Never seen css hot code reloading in rails platform.