Deploying a Rails App with React Frontend to Heroku

This is not an overview of deploying a Rails API/React application, built in two separate pieces, two separate repos, to Heroku. (Although I did write a series on the topic.)

This is an overview of taking Rails application that uses Webpack to configure the frontend to use React and deploying it to Heroku. (Which is how I'm building my social media marketing app.) One repo, one app deployed, all the awesomeness.

If you've started your project by running:

rails new rails_react_app -d=postgresql --webpack=react

This overview is for you!

First you'll need to create a new app in your Heroku account, either via the CLI or the web app. Creating an app in the CLI will automatically create a git remote. You can push changes to this remote or set up automatic deploys via GitHub.

$ heroku create rails-react-app

From within the web app:

1. Login
2. New > Create New App: rails-react-app

To set up automatic deploys from GitHub:

1. Deployment Method > Connect to GitHub
2. Find your project GitHub repo
3. Pick the appropriate branch
4. Enable Automatic deploys

So far, so good. At this point, we come to the main difference in deployment of separate Rails & React project repos: buildpacks!

You did not use create-react-app to build this project, so do not need the create-react-app buildpack.

You need to add the Heroku NodeJS and Ruby buildpacks. You can do so via the web app or the CLI.

Web App:

1. Select your project
2. Navigate to Settings
3. Scroll down to Buildpacks
4. Add buildpack: nodejs
5. Add buildpack: ruby

CLI:

$ heroku buildpacks:set heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/ruby

To make sure you've added them both successfully:

$ heroku buildpacks

Note, if you get the following errors when running heroku commands:

 ›   Error: Missing required flag:
 ›     -a, --app APP  app to run command against
 ›   See more help with --help

Make sure you're running the commands with the -a flag, followed by the name of your app on Heroku.

$ heroku buildpacks -a rails-react-app

Don't forget to migrate and seed your database!

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

What's next?

You should be good to go! If you run into any errors, check your logs:

$ heroku logs -t

For me, I needed to upgrade my Ruby version to 2.6.6 to work with Heroku-18.