ReactWebpackRails
Rails - Webpack setup with React integration.
Inspired and partially based on https://github.com/reactjs/react-rails/ this gem provides generators and helpers that makes react-webpack-rails integration easy.
Installation
Add this line to your application's Gemfile:
gem 'react_webpack_rails'
Execute:
$ bundle
Or install it yourself as:
$ gem install react_webpack_rails
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
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';
registerComponent('customComponentName', Component);
Use it in rails view
<%= react_component('customComponentName', { user: User.last }) %>
Use it in javascript file
const element = $('#my-element');
renderComponent('customComponentName', {user_id: 1}, element);
Development
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
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
Development
After checking out the repo, run bin/setup to install dependencies. Then, run rake rspec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to rubygems.org.
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/netguru/react_webpack_rails.
License
The gem is available as open source under the terms of the MIT License.