Need help with Rails5-ActionCable-Redux-React-ChatAppExample?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

193 Stars 35 Forks 23 Commits 1 Opened issues


A Rails5, ActionCable, Redux/React ChatApp Example, now with Webpack/HMR for rapid development

Services available


Need anything else?

Contributors list

# 369,637
18 commits
# 248,675
4 commits


[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: 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
    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
    npm install
    rails db:create
    rails db:migrate
    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
  • 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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.