Deploying a Rails API/ React Application on Heroku, Part 1: Backend Deploy
Tags: rails, react, heroku, deploy
Published: 2020-11-11 03:07:11

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](https://www.geeksforgeeks.org/difference-between-sqlite-and-postgresql/).

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](https://dev.to/wrightdotclick/heroku-cli-on-wsl-26fp) 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](https://winaero.com/reset-password-wsl-linux-distro-windows-10/)

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!