Generator-rails-react-browserify NPM

generator-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 into javascript-build.js via config = require('./config.json');
config/browserify/errors-handler.js is responsible for errors handling. Currently, there is only Browserify has use this functions
config/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