rmosolgo / react-rails-hot-loader Goto Github PK

View Code? Open in Web Editor NEW

88.0 5.0 26.0 67 KB

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

License: MIT License

Ruby 79.99% Shell 0.30% JavaScript 0.95% HTML 18.59% CSS 0.17%

react-rails-hot-loader's Introduction

React::Rails::HotLoader

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.

Installation

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

Usage

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.)

Configuration

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

Doeses & Doesn'ts

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)

TODO

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

License

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

react-rails-hot-loader's People

Contributors

Stargazers

Watchers

react-rails-hot-loader's Issues

Undefined method to_prepare

Hi. For the first time trying your gem and here is what I get on rails 5.1.3 and react-rails 2.2.1

It seems there is no server running or you are not in a rails project root directory
=> Booting Puma
=> Rails 5.1.3 application starting in development on http://localhost:3000
=> Run rails server -h for more startup options
Exiting
/home/glaux/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-hot-loader-0.8.0/lib/hot_loader/railtie.rb:14:in block in <class:Railtie>' : undefined method to_prepare' for ActionDispatch::Reloader:Class (NoMethodError)

Rails Server crashes on page reload

Happens sometimes when hard reloading jasmine-rails specs page, haven't been able to figure out what causes it exactly:

/usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/eventmachine-1.0.8/lib/eventmachine.rb:534:in `start_tcp_server': no acceptor (port is in use or requires root privileges) (RuntimeError)
        from /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/eventmachine-1.0.8/lib/eventmachine.rb:534:in `start_server'
        from /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/em-websocket-0.5.1/lib/em-websocket/websocket.rb:46:in `run'
        from /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react-rails-hot-loader-0.7.0/lib/hot_loader/server.rb:70:in `run_websocket_server'
        from /usr/local/opt/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/react-rails-hot-loader-0.7.0/lib/hot_loader/server.rb:33:in `block in start'

Hot Reloading doesn't work if we have any statement before actual react component.

If we use strict mode as the first statement (or any other statement for that matter) then js code evals the first statement and thus, hot reloading doesn't work.

For example,

'use strict';

const Header = React.createClass({

  render() {
    return (
        <h1>Header Text</h1>
    );
  }
})

Hot loader breaks rails generate when using phusion passenger server

running any rails g command gives me following error:

/home/vagrant/.rvm/gems/ruby-2.2.3@leasing/gems/react-rails-hot-loader-0.5.0/lib/hot_loader/railtie.rb:19:in `block in <class:Railtie>': undefined method `on_event' for PhusionPassenger:Module (NoMethodError)

Adding assets to the watch glob

Currently, it doesn't look like it's possible to modify the glob string used to watch for assets. I've got a lot of files in my project that are *.coffee files, not *.js.coffee. I was able to modify the line

asset_glob = path.to_s + "/**/*.js*"

asset_glob = path.to_s + "/**/*.{js,coffee}*"

to get me up and running. I didn't know if you would want to merge in a change like that, or if you would prefer to add some kind of mechanism for configuring the asset glob path.

Either way, I'm up for sending a PR if you're interested in adding it.

Awesome gem by the way! This is going in all my projects.

Seems broken on Rails 5.2

Hello,

I wanted to try out hot loader with react-rails but unfortunatelly it does not seem to work. We are on Rails 5.2.

$ rails g react:install
W, [2018-08-22T01:06:12.047489 #3593]  WARN -- : [SKYLIGHT] [1.4.0] Running Skylight in development mode. No data will be reported until you deploy your app.
(To disable this message for all local apps, run `skylight disable_dev_warning`.)
Traceback (most recent call last):
	43: from bin/rails:4:in `<main>'
	42: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `require'
	41: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:249:in `load_dependency'
	40: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `block in require'
	39: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/bootsnap-1.1.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:17:in `require'
	38: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/bootsnap-1.1.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:17:in `require'
	37: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/commands.rb:18:in `<main>'
	36: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/command.rb:46:in `invoke'
	35: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/command/base.rb:65:in `perform'
	34: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/thor-0.19.4/lib/thor.rb:369:in `dispatch'
	33: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/thor-0.19.4/lib/thor/invocation.rb:126:in `invoke_command'
	32: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/thor-0.19.4/lib/thor/command.rb:27:in `run'
	31: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/commands/generate/generate_command.rb:21:in `perform'
	30: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/command/actions.rb:18:in `require_application_and_environment!'
	29: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/application.rb:337:in `require_environment!'
	28: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `require'
	27: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:249:in `load_dependency'
	26: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/dependencies.rb:283:in `block in require'
	25: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/skylight-1.4.0/lib/skylight/probes.rb:81:in `require'
	24: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/bootsnap-1.1.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:17:in `require'
	23: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/bootsnap-1.1.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:17:in `require'
	22: from /vagrant/config/environment.rb:5:in `<main>'
	21: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/application.rb:361:in `initialize!'
	20: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/initializable.rb:60:in `run_initializers'
	19: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:205:in `tsort_each'
	18: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:226:in `tsort_each'
	17: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:347:in `each_strongly_connected_component'
	16: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:347:in `call'
	15: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:347:in `each'
	14: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:349:in `block in each_strongly_connected_component'
	13: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:431:in `each_strongly_connected_component_from'
	12: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:350:in `block (2 levels) in each_strongly_connected_component'
	11: from /home/vagrant/.rvm/rubies/ruby-2.5.1/lib/ruby/2.5.0/tsort.rb:228:in `block in tsort_each'
	10: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/initializable.rb:61:in `block in run_initializers'
	 9: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/initializable.rb:32:in `run'
	 8: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/initializable.rb:32:in `instance_exec'
	 7: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/railties-5.2.0/lib/rails/application/finisher.rb:75:in `block in <module:Finisher>'
	 6: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/lazy_load_hooks.rb:51:in `run_load_hooks'
	 5: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/lazy_load_hooks.rb:51:in `each'
	 4: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/lazy_load_hooks.rb:52:in `block in run_load_hooks'
	 3: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/lazy_load_hooks.rb:67:in `execute_hook'
	 2: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/lazy_load_hooks.rb:62:in `with_execution_control'
	 1: from /home/vagrant/.rvm/gems/ruby-2.5.1/gems/activesupport-5.2.0/lib/active_support/lazy_load_hooks.rb:69:in `block in execute_hook'
/home/vagrant/.rvm/gems/ruby-2.5.1/gems/react-rails-hot-loader-0.8.0/lib/hot_loader/railtie.rb:14:in `block in <class:Railtie>': undefined method `to_prepare' for ActionDispatch::Reloader:Class (NoMethodError)
Did you mean?  to_param

[HotLoader] starting WS server (ws://0.0.0.0:8082) - starts many times

rails: 5.0.1
mac os (rvm, ruby 2.4)
using puma (standard command rails s)
Each time I browse any page, with or without react component, in my log console I'm getting many many entries (about 67)

[HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] opened a connection (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082) [HotLoader] starting WS server (ws://0.0.0.0:8082)

What is cause of this?

NoMethodError: undefined method `flush' for Logger

Hello, guys!

First of all, wanted to say thanks for that gem, works great! But I've found an issue:
React::Rails::HotLoader.log: No flush method for Rails.logger in edge rails

For some reason, you decided to render all errors through your own method, which ends up running ::Rails.logger.flush, that is not available (at least in rails 4.1.6)

When used with browserify and react I see [Log] [HotLoader] SyntaxError: Unexpected use of reserved word 'import'

Hi,

First of all, thanks for the great gem. Although I see that the changed component code is sent to the browser I get an error in the browser console log: [Log] [HotLoader] SyntaxError: Unexpected use of reserved word 'import'

I'm using a setup similar to https://github.com/suzan2go/react-rails-redux-sample and it looks like there is missing a babel step before the hot-loader sends the updated file to the browser. The reails-redux setup works now I want to get it working with hot loading changes.

Any hint on how to go forward would be very helpful. Thanks.

views of .js.es6.jsx not hot-reloading

added an initializer and added file type to react_rails_hot_loader.rb but no joy :(

Any ideas?

[HotLoader] updating: intern_badges.js.es6.jsx
[HotLoader] update finished

but the content doesn't reload.. i have to manually refresh.

Doesn't work with Thin server

When using thin server rails s just exits with no error explanation.

Symbol not found: _clock_gettime

Hey!

Running rails server gives me following error, any suggestion?

dyld: lazy symbol binding failed: Symbol not found: _clock_gettime
  Referenced from: /usr/local/opt/rbenv/versions/2.2.5/lib/ruby/gems/2.2.0/extensions/x86_64-darwin-15/2.2.0-static/eventmachine-1.2.0.1/rubyeventmachine.bundle (which was built for Mac OS X 10.12)
  Expected in: /usr/lib/libSystem.B.dylib

dyld: Symbol not found: _clock_gettime
  Referenced from: /usr/local/opt/rbenv/versions/2.2.5/lib/ruby/gems/2.2.0/extensions/x86_64-darwin-15/2.2.0-static/eventmachine-1.2.0.1/rubyeventmachine.bundle (which was built for Mac OS X 10.12)
  Expected in: /usr/lib/libSystem.B.dylib

[HotLoader] SyntaxError: Unexpected token <

Hi guys,
react hot loader is not working anymore and i miss it very much ;) When i save a file, this is what i typically see in my console:

[HotLoader] updating: _file.js.jsx
[HotLoader] SyntaxError: Unexpected token <
[HotLoader] update finished

I'm not totally sure, but i think recent updates broke it. Currently i'm using the following: ruby 2.3.0, react-rails-hot-loader-0.4.0, react-rails-1.5.0 and puma-2.15.3.

There is this troubleshooting area for react hot loader and fortunately the error Unexpected token < is listed there, but this didn't get me any further... Here is the link.

Any ideas on how to debug or solve his issue?

Every help is greatly appreciated,
thanks a lot
Tom