https://github.com/hung-phan/generator-rails-react-browserify

Scaffolding Rails app with react.js and browserify
https://github.com/hung-phan/generator-rails-react-browserify

Last synced: about 10 hours ago
JSON representation

Scaffolding Rails app with react.js and browserify

• Host: GitHub
• URL: https://github.com/hung-phan/generator-rails-react-browserify
• Owner: hung-phan
• Created: 2015-02-02T15:16:45.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-11-09T14:40:13.000Z (about 9 years ago)
• Last Synced: 2024-11-11T11:53:32.218Z (5 days ago)
• Language: JavaScript
• Size: 703 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# generator-rails-react-browserify

> [Yeoman](http://yeoman.io) generator

[![NPM](https://nodei.co/npm/generator-rails-react-browserify.png?downloads=true)](https://nodei.co/npm/generator-rails-react-browserify/)

## Deprecated - Please consider to use [generator-rails-react-webpack](https://github.com/hung-phan/generator-rails-react-webpack)

## Getting Started

To install `generator-rails-react-browserify` from npm, run:

```bash

$ npm install -g generator-rails-react-browserify

```

## Usage for Rails 4.*

Create Ruby on Rails project with normal `rails` command, but skip gem bundling:

```bash

$ rails new app-name --skip-bundle

```

Then, initiate the generator:

```bash

$ 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](http://bower.io/) 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/

  |  |  |  |- .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](https://6to5.org/) with the support of [Browserify](http://browserify.org/) for javascript moduling. Inject

`regeneratorRunTime` environment to support ES6 generators feature which allows you to using modern javascript libraries like

[js-csp](https://github.com/ubolonton/js-csp) today. Contain transform configurations for [browserify-shim](https://github.com/thlorenz/browserify-shim).

Make sure that view their [recipes](https://github.com/thlorenz/browserify-shim/wiki/browserify-shim-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](http://browserify.org/)

  has use this functions

- `config/browserify/javascript-build.js` is responsible for transforming ES6+ into ES5 and building javascript modules.

### Current transformation applied

- [babelify](https://github.com/babel/babelify)

- [browserify-shim](https://github.com/thlorenz/browserify-shim)

- [envify](https://github.com/babel/babelify)

### 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

```json

"browserify": { "transform": [ "babelify" ] },

```

Use [global transform](https://github.com/substack/node-browserify#btransformtr-opts)

```javascript

b.transform(transform, { global: true });

```

### Available gulp task

```bash

$ 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

```bash

$ gulp javascript:dev

```

```bash

$ rails server

```

## Assets compile

Compile your assets before deploying to production server

```bash

$ 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](https://github.com/guard/guard-livereload). Then, use [rack-livereload](https://github.com/johnbintz/rack-livereload)

or install [LiveReload Safari/Chrome extension](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-)

```bash

$ 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](https://github.com/tmpvar/jsdom)). And update mocha config

if you need to in `package.json`

```bash

npm test

```

```bash

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/

  |  |  |  |- /

  |  |  |  |- .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

![alt text](https://raw.githubusercontent.com/hung-phan/generator-rails-react-browserify/master/screenshot.png "application screenshot")

## Contribution

All contributions are welcomed.

## License

[MIT License](http://en.wikipedia.org/wiki/MIT_License)