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

wclittle
197 Stars 36 Forks 23 Commits 1 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

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:

..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!

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.