Deploying a Rails API/ React Application on Heroku, Part 1: Backend Deploy

You’ve built a beautiful, or at least a functional, application with a Rails API backend and React frontend that you want to share with the world. What’s a dev to do? Heroku!

Pre-Reqs

You are going to need:

1. A Rails/React application ready for deployment
2. A Heroku account with space for two new apps. (Note that free accounts are limited to 5 apps.)

Step 1: Prep Your Rails Backend

Let's make sure your application is Heroku-ready. Here-oku we go! (Sorry, not sorry)

1.1 Create a New Branch

Before you make any changes to your application, create a new branch in your local repo, and push to remote. I recommend making use of main if you haven't already. We'll use this branch to auto-deploy from GitHub later on.

$ git checkout -b main
$ git push -u origin main

1.2 Use PostgreSQL Database

If you built a Rails API, chances are you used SQLite3 for your database because it is the default.

Unfortunately you can't use SQLite on Heroku, and must use PostgreSQL. Heroku explains why here.

To make this change in your application, navigate to your Gemfile. Comment out, or delete, the sqlite gem line and add PostgreSQL.

# gem 'sqlite3', '~> 1.4'
gem 'pg'

Now run bundle install in your terminal.
$ bundle install

I didn't have to make any changes to my development.yml file, or get rid of any .sqlite3 files.

1.3 Update CORS

Chances are you set your CORS to allow for calls from localhost or any origin. We want to update this to make sure your deployed application will accept API calls from your frontend deployed application only. Update config/initializers/cors.rb accordingly. I recommend naming your Heroku apps similarly to your git repos.

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://your-app-name.herokuapp.com'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true
  end
end

Step 2: Download the Heroku CLI

You can follow Heroku's instructions for installing the Heroku CLI on your local machine.

If you're using WSL, like me, you'll want to follow the directions under Standalone Installations.

curl https://cli-assets.heroku.com/install.sh | sh

If you're asked for your Ubuntu admin password and forgotten it, also like me, follow these instructions

Verify your installation:
$ heroku --version

Now you can login with the command:
$ heroku login

And cd into your project folder:
$ cd my-project-backend

Step 3: Create & Deploy Your Backend Heroku App

You can do this from the Heroku CLI, or from within the Heroku web application.

This next part is only if you want to use the Heroku CLI*
In the CLI, from within your repo directory:

$ heroku create your-app-name-backend
$ git remote add heroku git@heroku.com:your-app-name-backend.git

If you'd like to use the CLI:

From within the web app:

1. Login
2. New > Create New App: your-app-name-backend
3. Deployment Method > Connect to GitHub
4. Find your Rails API GitHub repo
5. Pick the branch you created above
6. Enable Automatic deploys

This is for both deployment methods. Back in your terminal, still in your backend directory, run:

$ heroku run rake db:migrate
$ heroku run rake db:seed

Note that at this point you may come across some errors. Try to read the error messages and debug from there. I came across an issue with a migration changing a data type to boolean. I edited my original migration to make the data type boolean and deleted my later migration that changed it. (I know, I know, don't @ me.)

You should now be able to view your application on Heroku! Hooray!

If you're having issues, drop me a comment and I'll do my best to assist!

Part II will cover deploying your frontend React app and connecting the front and backend applications!