Reload React.js components with Ruby on Rails & react-rails.

When you edit components, they'll be reloaded by the browser & re-mounted in the page.

Add this line to your application's Gemfile:

gem 'react-rails-hot-loader'

And then execute:

$ bundle

Or install it yourself as:

$ gem install react-rails-hot-loader

• Include the JavaScript:

  // app/assets/javascripts/application.js
  //= require react-rails-hot-loader
  

  (When not Rails.env.development?, this requires an empty file, so don't worry about leaving it in production deploys.)

• Restart your development server

• Edit files in /app/assets/javascripts & save changes -- they'll be reloaded in the client and React components will be remounted.

(This gem includes an initializer to start a change notification server in development only.)

If you notice that your assets are not being recompiled and hot loaded, it could be because they aren't being matched by the default asset glob used (**/*.{js,coffee}*). You can modify this asset glob like so:

# config/initializers/react_rails_hot_loader.rb
React::Rails::HotLoader::AssetChangeSet.asset_glob = "**/*.{css,sass,scss,js,rb}*" # I <3 Opal

You can choose a port to start it on (default is 8082):

# config/initializers/react_rails_hot_loader.rb
React::Rails::HotLoader.port = 8088

react-rails-hot-loader ...

• does set up a WebSocket server & client
• does reload JS assets when they change (from /app/assets/javascripts/*.{css,js,coffee}*)
• does remount components (via ReactRailsUJS) after reloading assets
• doesn't reload Rails view files (html, erb, slim, etc)

• Figure out how the "real" React hot-loader preserves state and do that
• Log out when a push fails, or log the JS code if the push succeeds but doesn't get eval'ed

The gem is available as open source under the terms of the MIT License.