Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    generator-rails-react-webpackpublic

    generator-rails-react-webpack

    Yeoman generator

    NPM

    Related project - Consider using koa-react-isomorphic

    Consider to see koa-react-isomorphic project for testing component and Redux usage

    Getting Started

    To install generator-rails-react-webpack from npm, run:

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

    Up and Running

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

    Application template

    Javascript modules

    All javascript modules are placed in app/frontend/javascripts folder, which will be compiled into app/assets/javascript/build folder. In addition, app/assets/javascript/build is appended to .gitignore (Webpack built bundles will be ignored and rebuilt every deployment).

    Control your application assets via webpack or sprockets. However, for javascript files, prefer webpack over sprockets for the reason that those will run through loaders before getting serve at the browser.

    package.json

    Manage built tools and application dependencies

    Webpack

    • config.json: loads additional configurations into javascript-build.js via config = require('./config.json');

        {
          "webpack": {
            "path": "./app/frontend/javascripts/",
            "test": "./__tests__/**/*-test.js",
            "build": "./app/assets/javascripts/build"
          }
        }

    Code splitting

    Refer to webpack code spliting for detail implementations. Bundles are created by require or require.ensure will be automatically loaded. Additionally, all the settings in devlopment.config.js and production.config.js for optimizing common chunk have been added to config files.

      new webpack.optimize.CommonsChunkPlugin('common', 'common.js'), // development.config.js 
      new webpack.optimize.CommonsChunkPlugin('common', 'common-[chunkhash].bundle.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' %>

    Available gulp task

    $ gulp clean # remove the build folder placed at 'app/assets/javascripts/build'
    $ gulp build # should use this for testing only, please read Assets compile

    Start developing

    Run these commands, and start coding

    $ npm run dev
    $ rails server

    Assets compile

    $ rake assets:precompile RAILS_ENV=production

    Heroku deploy

    Configure Heroku to use ddollar's multi-buildpack:

    $ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

    Add the heroku-nodejs buildpack and heroku-ruby buildpack to .buildpacks:

    $ cat .buildpacks
    https://github.com/heroku/heroku-buildpack-nodejs
    https://github.com/heroku/heroku-buildpack-ruby

    Options

    Name: mongoid (for mongodb)

    add --skip-active-record option to your rails new app --skip-active-record command before selecting this option.

    Task

    Enable flowtype in development

    $ npm run flow:watch
    $ npm run flow:stop # to terminate the server

    Testing

    Test files are placed in the same folder with component.

    ▾ home/
        home-test.js
        home.js
    npm test # unit test
    npm run test:converage # generate test coverage using istanbul

    You need to add annotation to the file to enable flowtype (// @flow)

    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>.js
      |  |- controllers/
      |  |- helpers/
      |  |- mailers/
      |  |- models/
      |  |- views/
      |  |  |- application/
      |  |  |  |- index.html # default template for the application
      |  |  |- layouts/
      |  |  |  |- application.html.erb
      |- bin/
      |- config/
      |  |- initializers/
      |  |  |- *.rb
      |  |  |- webpack.rb # webpack manifest config
      |  |- webpack/
      |  |  |- config.json
      |  |  |- default.config.js
      |  |  |- development.config.js
      |  |  |- javascript-build.js
      |  |  |- production.config.js
      |- db/
      |- lib/
      |  |- assets/
      |  |- tasks/
      |  |  |- webpack.rake # built task
      |- log/
      |- public/
      |- test/
      |- config.ru
      |- gulpfile.js
      |- package.json
      |- config.ru
      |- Gemfile
      |- Gemfile.lock
      |- Rakefile
      |- README.rdoc

    Changelog

    0.3 -> 0.4: Add babel-plugin-typecheck, fixed redundant event listeners from dev-server and only-dev-server, and update code to es6

    Acknowledgement

    Thanks Dave Clark for this wonderful post

    Example project

    Running example

    alt text

    Contribution

    All contributions are welcomed.

    License

    MIT License

    install

    npm i generator-rails-react-webpack

    Downloadsweekly downloads

    69

    version

    1.1.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar