Yeoman generator
Deprecated - Please consider to use generator-rails-react-webpack
To install generator-rails-react-browserify
from npm, run:
$ npm install -g generator-rails-react-browserify
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-browserify
Answer 'Yes' to all 'Overwrite' actions. Then, update 'config/database.yml' if you use different database than 'sqlite3'.
- Bower via
npm install -g bower
I define all my javascript modules in 'app/frontend/javascripts', which will be compiled into 'app/assets/javascript/build' folder later.
Append suffix .bundle.js for each built module.
application/
|- app/
| |- frontend/
| | |- javascripts/
| | | |- <page-module>.bundle.js
Change the default configuration for built glob in config/browserify/config.json
if you want to use other suffix than '.bundle.js'
Manage development dependencies for javascript with incremental rebuilding for each module. Turn ES6+ code into vanilla ES5
using 6to5 with the support of Browserify for javascript moduling. Inject
regeneratorRunTime
environment to support ES6 generators feature which allows you to using modern javascript libraries like
js-csp today. Contain transform configurations for browserify-shim.
Make sure that view their recipes for more informations.
config/browserify/config.json
is responsible for controlling development and production build for javascript modules. Additionally, you can define extra configurations here, then, it will be loaded intojavascript-build.js
viaconfig = require('./config.json');
config/browserify/errors-handler.js
is responsible for errors handling. Currently, there is only Browserify has use this functionsconfig/browserify/javascript-build.js
is responsible for transforming ES6+ into ES5 and building javascript modules.
Add require('babel/pollyfill');
to support es6 generator syntax at the top level bundle
Specify transformation on the node_modules/module/package.json
itself
"browserify": { "transform": [ "babelify" ] },
Use global transform
b.transform(transform, { global: true });
$ gulp javascript:clean # remove the build folder placed at 'app/assets/javascripts/build'
$ gulp javascript:dev # watch over changes for multiple js bundle, rebuild for each module that changes
$ gulp javascript:dev --only main.bundle.js # watch over changes for single js module
$ gulp javascript:build # build for production with no source map
Run these commands, and start coding
$ gulp javascript:dev
$ rails server
Compile your assets before deploying to production server
$ gulp javascript:build
$ rake assets:precompile RAILS_ENV=production
Name: mongoid (for mongodb)
add --skip-active-record
option to your rails new app --skip-active-record
command before selecting this option.
For using livereload utility, firstly, install guard. Then, use rack-livereload or install LiveReload Safari/Chrome extension
$ bundle exec guard # to run the guard server and enjoy coding
Test files are placed in the same folder with component.
▾ home/
home-test.js
home.js*
Use iojs instead of node to run mocha test (See more here). And update mocha config
if you need to in package.json
npm test
npm run test-converage # generate test coverage using istanbul
application/
|- app/
| |- apis/
| | |- v1/
| | | |- base.rb
| | | |- person_api.rb
| | |- base.rb
| |- assets/
| | |- images/
| | |- javascripts/
| | | |- build/
| | | | |- page-module.bundle.js
| | | |- application.js
| | |- stylesheets/
| | | |- application.css
| |- frontend/
| | |- javascripts/
| | | |- <page-module-dependencies>/
| | | |- <page-module>.bundle.js
| |- controllers/
| |- helpers/
| |- mailers/
| |- models/
| |- views/
| | |- application/
| | | |- index.html # default template for the application
| | |- layouts/
| | | |- application.html.erb
|- bin/
|- config/
| |- browserify/
| | |- config.json
| | |- errors-handler.js
| | |- javascript-build.js
| |- initializers/
| | |- bower_rails.rb # bower rails config
|- db/
|- lib/
|- log/
|- public/
|- test/
|- vendor/
| |- assets/
| | |- bower_components/
| | | |- third libararies/
|- | |- bower.json
|- Bowerfile # bower package dependencies
|- config.ru
|- gulpfile.js
|- package.json
|- config.ru
|- Gemfile
|- Gemfile.lock
|- Guardfile # Guard file for livereload
|- Rakefile
|- README.rdoc
All contributions are welcomed.