fk2000/Gemfile

## application.html.erb
 <!DOCTYPE html>
 <html>
   <head>
     <title>HypernovaGettingStartedWithRails</title>
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
     <%= csrf_meta_tags %>
   </head>
   <body>

   <%= yield %>

+  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   </body>
 </html>

## file0.sh
# ruby/rails(rbenv)
$ rbenv -v
rbenv 1.1.1-28-gb943955
$ ruby -v
ruby 2.4.2p198 (2017-09-14 revision 59899) [x86_64-linux]
$ gem -v
2.6.13
$ rails -v
Rails 5.1.4

# node/npm(nvm)
$ nvm --version
0.33.8
$ node -v
v7.9.0
$ npm -v
4.2.0

## file1.sh
$ rails new hypernova-getting-started-with-rails

## file15.sh
% bin/rails server

## file17.txt
<div data-hypernova-key="MyComponentjs"></div>
<script type="application/json" data-hypernova-key="MyComponentjs"><!--{"name":"Hypernova"}--></script>

## file2.sh
$ rails generate controller welcome index

## file4.sh
$ bundle install
Installing browserify-rails 4.2.0

## file5.sh
% npm init -y

## file7.sh
% npm install

## Gemfile
gem "hypernova"

## hypernova.js
const hypernova = require('hypernova/server');

hypernova({
  devMode: true,

  getComponent(name) {
    if (name === 'MyComponent.js') {
      return require('./app/assets/javascripts/MyComponent.js');
    }
    return null;
  },

  port: 3030,
});

## hypernova.rb
require 'hypernova'

Hypernova.configure do |config|
  config.host = 'localhost'
  config.port = 3030
end

## index.html.erb
<%= render_react_component('MyComponent.js', name: 'World') %>

## MyComponent.js
var React = require('react');
var renderReact = require('hypernova-react').renderReact;

function MyComponent(props) {
  return React.createElement('div', {
    onClick: function () {
      alert('Click handlers work.');
    },
  }, 'Hello, ' + props.name + '!');
}

module.exports = renderReact('MyComponent.js', MyComponent);

## package.json
{
  "name": "hypernova-getting-started-with-rails",
  "private": true,
  "dependencies": {
    "hypernova": "^1.0.0",
    "hypernova-react": "^1.0.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  },
  "devDependencies": {
    "browserify": "^13.0.1",
    "browserify-incremental": "^3.1.1"
  },
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "version": "1.0.0",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "fk2000",
  "license": "MIT"
}

## welcome_controller.rb
class WelcomeController < ApplicationController
- around_filter :hypernova_render_support
+ around_action :hypernova_render_support
  def index
  end
end
	<!DOCTYPE html>
	<html>
	<head>
	<title>HypernovaGettingStartedWithRails</title>
	<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
	- <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
	<%= csrf_meta_tags %>
	</head>
	<body>

	<%= yield %>

	+ <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
	</body>
	</html>
	# ruby/rails(rbenv)
	$ rbenv -v
	rbenv 1.1.1-28-gb943955
	$ ruby -v
	ruby 2.4.2p198 (2017-09-14 revision 59899) [x86_64-linux]
	$ gem -v
	2.6.13
	$ rails -v
	Rails 5.1.4

	# node/npm(nvm)
	$ nvm --version
	0.33.8
	$ node -v
	v7.9.0
	$ npm -v
	4.2.0
	<div data-hypernova-key="MyComponentjs"></div>
	<script type="application/json" data-hypernova-key="MyComponentjs"><!--{"name":"Hypernova"}--></script>
	const hypernova = require('hypernova/server');

	hypernova({
	devMode: true,

	getComponent(name) {
	if (name === 'MyComponent.js') {
	return require('./app/assets/javascripts/MyComponent.js');
	}
	return null;
	},

	port: 3030,
	});
	require 'hypernova'

	Hypernova.configure do \|config\|
	config.host = 'localhost'
	config.port = 3030
	end
	var React = require('react');
	var renderReact = require('hypernova-react').renderReact;

	function MyComponent(props) {
	return React.createElement('div', {
	onClick: function () {
	alert('Click handlers work.');
	},
	}, 'Hello, ' + props.name + '!');
	}

	module.exports = renderReact('MyComponent.js', MyComponent);
	{
	"name": "hypernova-getting-started-with-rails",
	"private": true,
	"dependencies": {
	"hypernova": "^1.0.0",
	"hypernova-react": "^1.0.0",
	"react": "^15.1.0",
	"react-dom": "^15.1.0"
	},
	"devDependencies": {
	"browserify": "^13.0.1",
	"browserify-incremental": "^3.1.1"
	},
	"description": "This README would normally document whatever steps are necessary to get the application up and running.",
	"version": "1.0.0",
	"main": "index.js",
	"directories": {
	"test": "test"
	},
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "fk2000",
	"license": "MIT"
	}
	class WelcomeController < ApplicationController
	- around_filter :hypernova_render_support
	+ around_action :hypernova_render_support
	def index
	end
	end