Skip to content

Instantly share code, notes, and snippets.

@nukosuke

nukosuke/application.html.erb

Last active February 8, 2017 08:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nukosuke/0770d835a6e9d16b6891d09ef97765c0 to your computer and use it in GitHub Desktop.
Save nukosuke/0770d835a6e9d16b6891d09ef97765c0 to your computer and use it in GitHub Desktop.
Download ZIP
react_on_railsとreact-routerでシングルページアプリケーションをサーバサイドレンダリングする ref: http://qiita.com/nukosuke/items/2769b9505617c4b6ee07
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<%= server_render_js("Helmet.rewind().title.toString()") %>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
<body>
<%= yield %>
<%= javascript_include_tag 'application' %>
</body>
</html>
Raw
application.js
//= require vendor-bundle
//= require app-bundle
//= require jquery
//= require jquery_ujs
Raw
clientRegistration.jsx
import React from 'react';
import { Router as ReactRouter, browserHistory } from 'react-router';
import ReactOnRails from 'react-on-rails';
import routes from '../routes/routes';
const Router = (props, railsContext) => {
const history = browserHistory;
return (
<ReactRouter history={history}>
{routes}
</ReactRouter>
);
};
// This is how react_on_rails can see the Router in the browser.
ReactOnRails.register({
Router,
});
Raw
file0.txt
//= require react
//= require react_ujs
//= require components
Raw
file1.txt
gem 'react_on_rails', '~> 6'
Raw
file11.txt
# in app root dir
foreman start -f Procfile.dev
Raw
file2.txt
bundle exec rails g react_on_rails:install
Raw
file3.txt
class ApplicationController < ActionController::Base
protect_from_forgery with: :exception
def home
render_for_react()
end
private
# ref: http://r7kamura.hatenablog.com/entry/2016/10/10/173610
def common_props
{
currentUser: current_user,
}
end
def render_for_react(props: {}, status: 200)
if request.format.json?
response.headers["Cache-Control"] = "no-cache, no-store"
response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
response.headers["Pragma"] = "no-cache"
render(
json: common_props.merge(props),
status: status,
)
else
render(
html: view_context.react_component(
"Router",
prerender: true,
props: common_props.merge(props).as_json,
),
layout: true,
status: status,
)
end
end
end
Raw
file4.txt
# in client/
yarn add react-router react-helmet
Raw
react_on_rails.rb
# from
config.webpack_generated_files = %w( webpack-bundle.js )
# to
config.webpack_generated_files = %w( app-bundle.js server-bundle.js vendor-bundle.js )
# from
config.server_bundle_js_file = "webpack-bundle.js"
# to
config.server_bundle_js_file = "server-bundle.js"
Raw
serverRegistration.jsx
import React from 'react';
import { match, RouterContext } from 'react-router';
import ReactOnRails from 'react-on-rails';
import Helmet from 'react-helmet';
import routes from '../routes/routes';
// for header title server side rendeting on first load
// ref: http://r7kamura.hatenablog.com/entry/2016/10/10/173610
global.Helmet = Helmet;
const Router = (props, railsContext) => {
let error;
let redirectLocation;
let routeProps;
const { location } = railsContext;
match({ routes, location }, (_error, _redirectLocation, _routeProps) => {
error = _error;
redirectLocation = _redirectLocation;
routeProps = _routeProps;
});
if (error || redirectLocation) {
return { error, redirectLocation };
}
return (
<RouterContext {...routeProps} />
);
};
ReactOnRails.register({
Router,
});
Raw
webpack.config.js
/**
* from
*/
entry: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/Application/startup/registration',
],
output: {
filename: 'webpack-bundle.js',
path: '../app/assets/webpack',
},
/**
* to
*/
entry: {
vendor: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
],
app: [
'./app/bundles/Application/startup/clientRegistration',
],
server: [
'./app/bundles/Application/startup/serverRegistration',
]
},
output: {
filename: '[name]-bundle.js',
path: '../app/assets/webpack',
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment