ReactWebpackRails

Rails - Webpack setup with React integration.

This gem provides easy and convenient way to build modern JavaScript stack on top of Rails applications using Webpack and React.

Development branch!

See 0.2-stable for latest release.

Features

Install Generator for quick Webpack setup.
Integrated react-hot-loader
ES6/7 support with bablejs.
Node.js based server-side JavaScript execution.
React integration with server prerender option.
React-router integration.

Installation

Add this line to your application's Gemfile:

gem 'react_webpack_rails'

Execute:

$ bundle

Then run installation:

$ rails g react_webpack_rails:install

This will create following files:

├── app
│   ├── react
│   │   ├── components
│   │   │   ├── hello-world.jsx
│   │   │   └── hello-world-test.jsx
│   │   └── index.js
│   ├── views
│   │   └── layouts
│   │       └── _react_hot_assets.html.erb
│   └── assets
│       └── javascripts
│           └──react_bundle.js
├── webpack
│   ├── dev.config.js
│   ├── hot-dev.config.js
│   ├── production.config.js
│   └── tests.config.js
├── .babelrc
├── karma.conf.js
├── package.json
└── webpack.config.js

Establish the node packages (may take a few moments)

$ npm install    # you may see warnings to consider updating the provided package.json file with license and repository

Make sure you have webpack installed globally:

$ npm install webpack -g

Generate react_bundle for first time:

$ webpack

And require integration and bundle files in application.js

//= require react_integration
//= require react_bundle

Babel

By default, react-webpack-rails uses Babel Stage 1 - Proposal. If you want to change the stage, you can do so in the .babelrc file. It is however not recommended to use Stage 0 in a production app, because the features present there can be dropped, which would break your application.

Usage

Check docs for detailed api description.

to use hot-reloading add partial in your application.html.erb to `<body>`:

(it's not needed when you want to use just webpack in watch mode without hot-reloading)

<%= render 'layouts/react_hot_assets' %>

Register component in index.js

import Component from './components/some-component';
RWR.registerComponent('customComponentName', Component);

Use it in rails view

<%= react_component('customComponentName', { user: User.last }) %>

Use it in javascript file

const element = $('#my-element');
RWR.renderComponent('customComponentName', {user_id: 1}, element);

Render component in controller

def action_name
  render react_component 'customComponentName', props: { user_id: 1 }
end

Development environment

Run webpack in watch mode using script:

$ npm start

Run webpack in hot-auto-reloading mode using script (to use it you have to add react_hot_assets partial as mentioned before):

$ npm run start-hot-dev

Or manually:

$ webpack -w --config YOUR_CONFIG

Production environment

Run webpack in production mode before compiling assets using script:

$ npm run build

or manually:

$ webpack -p --config YOUR_CONFIG

Deployment

Check docs/deployment.md

Contributing

See the contribution guide.

License

The gem is available as open source under the terms of the MIT License.

kunal-supe/react_webpack_rails