The Complete React on Rails 5 Course

You're viewing a lesson from an old course. Click here to get access to the new version.

How to build a chat app with Rails 5.1 ActionCable and React.js Part 1

In the first part of this 2-part tutorial, learn how to build a chat app with Rails 5.1 and ActionCable. We'll use devise and Github omniauth for user authentication.

This video was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Enrol now to view this video

Lesson code -

See Part 2 of the tutorial, where we rebuild the frontend part of the chat app with React components.

To follow this tutorial, you need to first set up a Rails 5.1 app with user authentication using the Devise and omniauth gems. You can clone the project repo and checkout the crud branch and start from there:

git clone
cd reactchat
git checkout crud

We use Github for authentication. So you will need to register a new OAuth application on Github.

Please make sure you set the authorization callback URL correctly. With the default devise and omniauth settings, add `/users/auth/github/callback` to your root URL.

For example, in development, if your app is running on localhost port 3000, then the URL settings will be:

Homepage URL: http://localhost:3000

Authorization callback URL: http://localhost:3000/users/auth/github/callback

Register a new Github Oauth application

Once you've set up your Github app, Github will provide you with a Client ID and secret. You need to add these to your app's environment as `GITHUB_APP_ID` and `GITHUB_APP_SECRET`.

For development, the easiest way is to put them in your `~/.bash_profile`, start a new terminal window and restart your Rails server.

Liked this tutorial? Get more like this in your inbox