There has to be a better way to incorporate the JavaScript ecosystem into Rails.
Update October, 21 2015: We’re about to release 1.0 of the react_on_rails gem! It will include a generator which will make the setup of this process super easy!
Update September, 28 2015: Be sure to see https://github.com/shakacode/react_on_rails/ and the gem react_on_rails. My team is writing a gem to make the process of integrating react and webpack with Rails much easier. This also supports server rendering of react components, as well as advanced react techniques such as REDUX.
Update August 19, 2015: I’m working on revising this article to reflect much progress in this area since the original publication of this article in 2014. I highly recommend seeing the README at https://github.com/justin808/react-webpack-rails-tutorial and the pull requests (both open and closed) of what’s been incorporated since this article was first published.
Have you:
- Wondered if there’s a better way to utilize modern JavaScript client frameworks the context of an existing Ruby on Rails project?
- Gotten confused about how to integrate JavaScript libraries and examples that are packaged up into proper “modules”?
- Discovered the drawbacks of having all applications JavaScript littering the global name-space.
- Heard about ES6 (aka Harmony), the next version of JavaScript and how the cool kids in Silicon Valley (Facebook, Instagram, Square, etc.) are using ES6 syntax?
How would you like to achieve, within a Rails project:
- The ability to prototype a rich UI, seeing changes in JS and CSS/Sass code almost instantly after hitting save, without the page reloading.
- First class citizenship for utilizing the Node ecosystem, by specifying
dependencies in
package.json
, runningnpm install
, and then simply requiring modules in JavaScript files. - Seamless integration of Node based JavaScript assets for the Rails Asset Pipeline, thus not circumventing the asset pipeline, but co-existing with it and leveraging it.
- The ability to plug the node client side ecosystem into an existing Rails project seamlessly.
- Utilization of many JavaScript tools, such as the React JSX tranpiler and ES6 transpiler.
This article will show you how you can utilize Webpack in your Rails development process to achieve these goals!