How to Build a Twitter Clone with rails, ActionCable and React

Let me start by saying I think the things the teams working on CableReady and StimulusReflex are pretty awesome. They are aiming to make working with Reactive web applications as easy as the first Rails Blog tutorials during Rails’ infancy.

With all of that being said, I am someone who prefers a bit more explicitness and work with tools I already know (and well, a lot more developers in the ecosystem).

I am not a video guy, don’t have a video set up, and really prefer not to hear the sound of my own voice. So this will be done through words!

Without further ado, let’s get started with a new app:

rails new blabber --no-spring --webpack=react

Rails will do its thing, install the application, install the gems, process the Webpacker install, and install the NPM packages needed for React.

We can jump right into making a model to hold the data to clone what would be a tweet in this Twitter clone. All basic attributes:

rails g model Post username body:text likes_count:integer repost_count:integer

To keep this closely resembling the CableReady/StimulusReflex, we’ll add the same validation in the Post model:

class Post < ApplicationRecord
  validates :body, length: { minimum: 1, maximum: 280 }
end

We’ll make a few small adjustments to the generated migration file to add some…