Configure Rails app for Heroku Deploy with Action Cable

Hi everyone! When working with Action Cable in Rails, there are a few things you need to do in order to have Action Cable operate successfully in production. For my application I used Action Cable to set up a live chat feature. I ran into some issues when trying to deploy with my chat feature working. Compared to the instructions from other programmers, I had to tweak some things in order for it to work for me. So hopefully I can save someone else the headache! Assuming you’ve already successfully gotten Action Cable working in your development environment, let’s get started.

If you haven’t done so already, be sure to install the redis gem. You can simply type gem 'redis' in your Gemfile in Rails, and run bundle install to install it.

The next thing you should do is add the Redis To Go Add-on to your app. You can do this in your terminal:

heroku addons:add redistogo

This will prompt you to head to your Heroku account and set up a credit/debit card for your account. The nano plan is free, they just need a card on file.

By adding redistogo, we’re given a URL to add to our cable.yml file. To retrieve that URL, type:

heroku config --app <your-app-name> | grep REDISTOGO_URL

You can find your app name in your Heroku account if you’ve already deployed your app before. If you just typed heroku create, then Heroku will have generated an app name for you, such as fast-reaches-73823.

Head over to your config/cable.yml file, and paste in the redis URL like so:

You may be able to forego the <%= ENV.fetch(“REDIS_URL”), depending on your other configurations.

Next we can head over to the config/environments/production.rb file. Add the following lines to this file, replacing fast-reaches-73823 with your own app name.

Be sure that you type wss instead of ws (as you may have done in your config/environment/development.rb file in the config.action_cable_url line. This is the secure protocol for WebSockets in production. You should also change any fetch requests in your frontend to fetch to this URL, instead of a URL like ws://localhost:3000/cable. Change your requests to fetch to something like wss://<your-app-name>.herokuapp.com/cable in your frontend.

Be sure to add the following line to your config/routes.rb file:

Now all that’s left to do is push your code up to Heroku. For me it’s:

git push heroku main

You may be pushing it to your master branch instead, so adjust accordingly.

And that’s it! You should be able to use Action Cable in your Rails app deployed to Heroku.