generator-rails-react-browserify
v0.6.0generator-rails-react-browserify
Yeoman generator
Getting Started
To install generator-rails-react-browserify
from npm, run:
$ npm install -g generator-rails-react-browserify
Usage for Rails 4.*
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'.
Dependencies
- Bower via
npm install -g bower
Application template
I define all my javascript modules in 'app/frontend/javascripts', which will be compiled into 'app/assets/javascript/build' folder later.
Multiple bundle for browserify
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'
package.json
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.
gulpfile.js
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.
Current transformation applied
ES6 generator
Add require('babel/pollyfill');
to support es6 generator syntax at the top level bundle
Apply transform to node__modules/some_modules
Specify transformation on the node_modules/module/package.json
itself
"browserify": { "transform": [ "babelify" ] },
Use global transform
b.transform(transform, { global: true });
Available gulp task
$ 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
Start developing
Run these commands, and start coding
$ gulp javascript:dev
$ rails server
Assets compile
Compile your assets before deploying to production server
$ gulp javascript:build
$ rake assets:precompile RAILS_ENV=production
Options
Name: mongoid (for mongodb)
add --skip-active-record
option to your rails new app --skip-active-record
command before selecting this option.
Task
Live reload
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
Testing
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
Structure
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
Running example
Contribution
All contributions are welcomed.
License
Metadata
- MIT
- >=0.10.0
- Hung Phan
- released 7/24/2015