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.3-stable for latest release.
Features
- Install Generator for quick Webpack setup.
- Integrated react-hot-loader
- ES6/7 support with babeljs.
- Node.js based server-side JavaScript execution.
- React integration with server prerender option.
- React-router integration.
Plugins:
- rwr-alt plugin that makes it possible to populate and share Alt stores between react component located in different parts of rails views.
- rwr-redux allows to use redux state containers in a rails views.
- rwr-react_router react-router integration.
Installation
Add this line to your application's Gemfile:
Execute:
$ bundle
Then run installation:
$ rails g react_webpack_rails:install
read more about install generator here
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
And require integration and bundle files in application.js
//= require react_integration//= require react_bundleBabel
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)
Register component in index.js
;RWR;Use it in rails view
Use it in javascript file
const element = ;RWR;Render component in controller
render react_component: 'customComponentName', props: {user_id: 1 }endDevelopment 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
If you are using server side render in components (it's enabled by default in generated example), run node server:
$ npm run rwr-node-dev-server
Production environment
Run webpack in production mode before compiling assets using script:
$ npm run build
If you are using server side render (it's enabled by default in generated example), run node server:
$ npm run rwr-node-server
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.