Heroku Tutorial: Deploying a React Frontend/Rails Backend App

An overview of how to prepare a Rails/React project for deployment on Heroku

I recently deployed a project with a Rails backend and React frontend to Heroku and wanted to share my experience with the process, since it is not entirely obvious.

Preparing Project for Deployment

Before moving forward, you’ll want to take the following steps to prepare your project:

1. You have already started building your frontend and backend (using create-react-app [app-name] and rails g project-name).
2. Your app is configured to use the PostgreSQL database (note: please see below for information on updating your configuration).
3. The frontend and backend portions of your project have been initialized to Git as separate repositories (note: this is important).
4. Your frontend Node.js package manager is Yarn (note: please see below for more information on updating)

Configuring App to Use PostgreSQL

If you had not specified PostgreSQL when generating your Rails app (i.e. including --database=postgresql after rails g [app-name]), your app is most likely configured to SQLite3. Here’s how to change it:

1. Update your Gemfile — locate gem 'sqlite3' and replace with gem 'pg'
2. Re-install your dependencies (to generate a new Gemfile.lock) by running bundle install
3. Ensure the config/database.yml is using the postgresql adapter, similar to:

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

Updating Node.js Package Manager to Yarn

This definitely tripped me up, as I had been using NPM. To switch to Yarn, run the following in your console:

1. Install Yarn: brew install Yarn
2. Reinstall packages using Yarn add [package-name]

Deploying App to Heroku

It is important to note that the frontend and backend portions of our app will be deployed to Heroku as separate apps. Using my recently deployed project as an example, I will be referring tochatster-app-api, my Rails backend git repo, andchatster-app-frontend, my React frontend git repo.

Before getting started, you’ll want to:

1. Push all changes to Git
2. Create a Heroku account
3. Install the Heroku CLI

Step 1: Deploying Rails Backend

• Navigate into the directory housing your project’s Rails backend: cd chatster-app-api
• Sign into Heroku:

heroku login

• Create Heroku project

heroku create chatster-app-api

• Initialize heroku git remote

git remote add heroku git@heroku.com:chatser-app-api.git

• Add, commit, and push repository to your Heroku’s remote:

git add .
git commit -m "first heroku commit" 
git push heroku master

• Migrate your database

heroku run rake db:migrate

And, you’re done!

Step 2: Deploying React Frontend

1. Create file in your project’s root directory titled static.json that has the following code:

{ "root": "build/", "routes": { "/**": "index.html" } }

2. Update paths in fetch requests, or any other reference to your Rails api, to the URL of your deployed backend:

Using my project as an example, this means replacing all references to http://localhost:3000 with https://chatster-app-api.herokuapp.com

3. Create a Heroku app set to create-react-app-buildpack:

heroku create chatster-app --buildpack https://github.com/mars/create-react-app-buildpack.git

4. Initialize Heroku remote:

git remote add heroku git@heroku.com:chatser-app.git

5. Add, commit, and push repo to Heroku remote:

git add .
git commit -m "Start with create-react-app"
git push heroku master

6. Open app:

heroku open

And, voilà! Your project is live!