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

Linked Projects:

React Rooms

✨ 3 people thanked Hrishi Mittal for this tutorial.

👍 Send Thanks
 
Lesson code - https://github.com/learnetto/reactchat/tree/action-cable-without-react

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 https://github.com/learnetto/reactchat.git
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