Consider to see koa-react-isomorphic project for testing component and Redux usage
generator-rails-react-webpack from npm, run:
$ npm install -g generator-rails-react-webpack
Create Ruby on Rails project with normal
rails command, but skip gem bundling:
$ rails new app-name --skip-bundle
Then, initiate the generator:
$ cd app-name$ yo rails-react-webpack
Answer 'Yes' to all 'Overwrite' actions. Then, update 'config/database.yml' if you use different database than 'sqlite3'.
folder. In addition,
.gitignore (Webpack built bundles will be ignored and rebuilt every deployment).
Control your application assets via webpack or sprockets.
sprockets for the reason that those will run through loaders before getting
serve at the browser.
Manage built tools and application dependencies
config.json: loads additional configurations into
config = require('./config.json');
Refer to webpack code spliting for detail implementations.
Bundles are created by
require.ensure will be automatically loaded. Additionally, all the settings in
optimizing common chunk have been added to config files.
// development.config.js// production.config.js
Uncomment those and add this tag
<%= webpack_bundle_tag 'common.js' %> before your main bundle in your layout:
<%= webpack_bundle_tag 'common.js' %><%= webpack_bundle_tag 'main.js' %>
Run these commands, and start coding
$ npm run dev$ rails server
$ rake assets:precompile RAILS_ENV=production
Configure Heroku to use
$ heroku config:add BUILDPACK_URL=
heroku-nodejs buildpack and
heroku-ruby buildpack to .buildpacks:
$ cat .buildpacks
Name: mongoid (for mongodb)
--skip-active-record option to your
rails new app --skip-active-record command before selecting this option.
$ npm run flow:watch$ npm run flow:stop # to terminate the server
Test files are placed in the same folder with component.
npm test # unit test
npm run test:converage # generate test coverage using istanbul
You need to add annotation to the file to enable flowtype (
0.3 -> 0.4: Add babel-plugin-typecheck, fixed redundant event listeners from
only-dev-server, and update code to es6
Thanks Dave Clark for this wonderful post
All contributions are welcomed.