wclittle/Rails5-ActionCable-Redux-React-ChatAppExample

Rails5-ActionCable-Redux-React-ChatAppExample

[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.example to config/database.yml and setup your username to be whatever super user (PostgreSQL) you have on your local machine.
• From the Rails root in your console, run bundle install and npm install and rails db:create and rails db:migrate and rails db:seed to add a quick "Hello World" message into the database.
• Fire up your Rails server via rails s and point your web browser to http://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!