CableReady has both client (npm package) and server (Ruby gem) components which need to be installed. It is vitally important that you make sure that your server and client versions match exactly.

bundle add cable_ready
yarn add cable_ready

You can manually tweak and/or lock the versions you want to install by modifying Gemfile and package.json respectively, then re-running bundle install && yarn install.

ActionCable

CableReady depends on the ActionCable framework (installed by default as part of Ruby on Rails) to handle sending data to the client over websockets. You must have ActionCable installed on both the client and server... and it will be unless you've disabled it.

You can check your package.json to verify that @rails/actioncable is installed. If you have trouble with ActionCable, consider verifying that it's installed correctly.

Redis

​Redis for everything: caching, sessions, jobs and yes, ActionCable. Redis is a dependency for StimulusReflex; the installation task sets up Redis for ActionCable's subscription adapter in the development environment.

While Redis in development is not mandatory for standalone CableReady use, we do recommend it:

Gemfile
gem "redis", ">= 4.0", :require => ["redis", "redis/connection/hiredis"]
gem "hiredis"

config/cable.yml
development:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: your_application_development

Rails 5.2

The CableReady documentation assumes that you are running Rails 6.x. It is possible to use CableReady with Rails 5.2, but you must make some adjustments to your configuration.

1. Replace actioncable with @rails/actioncable in package.json

   • yarn remove actioncable

   • yarn add @rails/actioncable

2. Replace any instance of import Actioncable from "actioncable" with import { createConsumer } from "@rails/actioncable"

   • This imports the createConsumer function directly

   • Previously, you might call createConsumer() on the Actioncable import: Actioncable.createConsumer()

   • Now, you can reference createConsumer() directly

Polyfills for IE11

If you need to provide support for older browsers, you can yarn add @cable_ready/polyfills and include them before your Stimulus controllers (if any) and CableReady channels:

app/javascript/packs/application.js
// other stuff
import '@cable_ready/polyfills'
import 'channels'
import 'controllers'