[Updated Feb 27, 2016] Now with Webpack and Hot Module Replacement (HMR) for rapid development
Rails5 brings the long-awaited ActionCable (integrated websockets) into the game. Combined with the Redux implementation of Flux - and of course React components - there's potential here for an interesting stack if you don't want to create a separate front-end app and use Rails5 as an API server (which it now more easily does out of the box as an option, BTW).
I spent some time over the holiday break pulling examples from:
- react-rails
- react_on_rails
- Kenta Suzuki's react-rails-redux-sample
- DHH's Rails 5: Action Cable Demo
- react-redux-universal-hot-example
- ...and the Redux docs.
..to create a very simple chat app. Live demo here.
If you're curious to learn more, I posted some background/motivation and a code walkthrough on my Medium account here. Another post discussing the webpack/HMR addition is coming soon.
Anyway, diving right into the setup (I'm assuming you are familiar with Rails/JavaScript):
- Make sure you have Ruby 2.2.4, Rails 5.0.0.beta3 (or higher, if applicable), and recent versions of NPM, PostgreSQL, and Redis installed (for the Rails stuff, here's a quick setup tutorial).
- Grab the Redux dev tools Chrome exention
- Copy
config/database.yml.exampletoconfig/database.ymland setup your username to be whatever super user (PostgreSQL) you have on your local machine. - From the Rails root in your console, run
bundle installandnpm installandrails db:createandrails db:migrateandrails db:seedto add a quick "Hello World" message into the database. - Fire up your Rails server via
rails sand point your web browser tohttp://localhost:3000 - The first time you load the app, browserify-rails will do some caching, so give it a few seconds to load.
- Try opening two browsers side-by-side and see the web socket (via Action Cable) do its thing as you submit messages.
- For more rapid development with HMR with your react components, fire up the webpack server via
npm start
That's it for now!