Deploying React Frontend / Rails API Backend

Heroku Walkthrough

heroku, rails, react

I recently deployed my Capstone Project with my Rails API only backend and my React frontend to Heroku. For my Ruby on Rails project I was able to deploy easily, but once I had to deploy two different files it got a bit confusing and wanted to help anybody else who struggles with this! Trust me, it’s not entirely obvious and sometimes requires you to google multiple blogs and steps.

First things first. I had to make sure my app was utilizing gem 'pg' instead of using gem ‘sqlite3’ in my Gemfile. Heroku operates with PostgreSQL instead of SQLite database that Rails apps typically generate it, so you would need to convert your database. I fortunately was advised from the beginning of my projects so I had configured my app with this gem. Instead of having to convert later, it’s easier to just start your project by running:

rails new your_app_name --api --database=postgresql 

Configuring App to Use PostgreSQL:

1. Update your Gemfile — locate gem 'sqlite3' and replace that with gem 'pg'

PostgreSQL gem in Gemfile

2. Re-install your dependencies in order to generate a new Gemfile.lock and run bundle install . It will look slightly different in terms of how many gems installed and Gemfile dependencies installed, but you will see something like this after running bundle install:

after running `bundle install`

3. Make sure your app is using PostgreSQL databased by going to your root directory for your app and locating config/database.yml and right in the center of the file you’ll see the “adapter: postgresql”

config/database.yml

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

Deploying your Rails Backend to Heroku:

First Steps before deploying anything:

1. Create a Heroku account — https://signup.heroku.com/
2. Install the Heroku CLI — run brew tap heroku/brew && brew install heroku in your terminal. (This is for macOS. You can find more information if you’re using something else)

Next steps for deploying your backend:

1. Navigate into your project’s backend directory:

cd your-backend-app-api-name

2. Sign into Heroku in your terminal:

heroku login

3. Create your Heroku project:

heroku create your-backend-app-api-name

4. Initialize Heroku git remote:

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

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

git add .
git commit -m "deploying my heroku backend app"
git push heroku master

6. Migrate your database and seed data to host your data in Heroku:

heroku run rails db:migrate
heroku run rails db:seed

7. Run your Heroku server:

heroku open

Here you should see your browser open your deployed backend app.

SIDE NOTE — I ran into errors during this process and I’m sure it’s possible you do too so I’ll share what errors I ran into and took me a bit to realize it was a simple fix. So hopefully saves you some time!

errors while deploying backend app to heroku

So if you look carefully at the errors it’s giving me, it says my bundle only supports certain platforms that is different from my local platform. So as daunting as this long error may seem, you just need to add the platform to your lockfile and you should be good.

bundle lock --add-platform x86_64-linux 
bundle install 
git add .
git commit -m "adding platform x86_64-linux to lockfile"
git push heroku master

After running these commands, you could check your Gemfile.lock and check your platforms to see if what you just added is there.

Gemfile.lock showing PLATFORMS x86_64-linux

Deploying your React Frontend to Heroku:

1. Create file in your project’s ROOT DIRECTORY named static.json and add the following:

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

static.json

2. Update all of your fetch/axios requests to your deployed backend API instead of the localhost.

3. Create Heroku app with create-react-app-buildpack:

heroku create your-frontend-react-app-name --buildpack https://github.com/mars/create-react-app-buildpack.git

Once you deployed your app, you’ll see this buildpack added when you sign into your Heroku, navigate to your app name, and view settings.

buildpack in heroku

4. Initialize your Heroku remote:

git remote add heroku git@heroku.com:your-frontend-react-app-name.git

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

git add .
git commit -m "deploying frontend app to heroku with create-react-app"
git push heroku master

6. Open your frontend app:

heroku open

You should see your frontend app open in your browser. It seems like a lot but I tried to go through everything step by step to help you get through this process of making your project live!