You Made It, Now…Deploy That App!

React App w/ Rails Backend API — Hosted on Heroku

A teeny, tiny app I built last week…that took me too long to deploy!

I built a small app last week for a technical interview. The build includes a ReactJS frontend that makes API fetch requests to a RapidAPI address, as well a Ruby on Rails backend to store upvotes and downvotes to a PostgreSQL database.

I initially tried to have the backend hosted on Heroku with the front end deployed through GitHub Pages (using a gh-pages branch). I still haven’t figured out why I was never able to get my GitHub deployed app to show anything but the ReadMe.md file…so after the day trying, reverted to hosting the frontend on Heroku, as well. These steps should get you up and running pretty quickly. Follow any steps necessary to make sure both of your apps are connected to separate git repositories. You’ll also need to have previously connected your Heroku account to your local environment. You will want to do so before proceeding (you should only have to ever do this once, unless your Heroku password has changed).

DEPLOYING THE BACKEND:

It’s extremely important that you initially setup your Rails app with a PostgreSQL database. Heroku will not play nicely with the SQLite3 database that Rails auto-installs upon set-up. If you have PostgreSQL we should be all set to proceed.

In your terminal, cd into your backend app. Make sure that your git branch / working tree is clean. To check command: git status . You should see “On branch master — nothing to commit , working tree clean”. If not, make sure to git add . / git commit -m “<your comment info here>” / git push . This should push all changes and updates to git successfully. Next, in the command line: Heroku create <appName> . When this is successful, Heroku should let you know that it’s ‘done’ and provide you with the https url of your app (the first given https) like below:

Open your app in your text editor. We’ll need to check on a few files and make some important updates before proceeding with Heroku.

Make sure that your config/database.yml file resembles this (with appropriate names of your app accordingly):

If you have any stored passwords or database info in your default, make sure to move them into development. Because production will use this default, we only want adapter, encoding and pool keys to be in our default environment.

It’s also important that our app has a specified root route. In our config/routes.rb file, make sure to have a root path declared as below:

Accordingly, our controller should have a method declaring how to handle this route, as well:

Push any new changes to github immediately to, again, make sure the working tree is clean.

It’s now time to push all of our files to heroku. In the terminal, run command: git push heroku (or git push heroku master — either is fine). It will take much longer for this process to complete…once done heroku should finish with a message “Verifying deply… done.”

NEXT: run command: heroku run rake db:migrate . If you have any seed data, now would be a good time to also seed your db, with command: heroku run rake db:seed . For good measure I like to restart all dynos with command: heroku restart, and then open my hosted app with command: heroku run. If running properly, and you had a root that rendered json, your page should open to a json data message with specified message:

You can also try navigating to other routes (that render json) to see if they are running as expected.

At any time you can also log into your Heroku site, navigate to your apps page and check any number of items, there are full lists of activity and logs, as well as the ability to make sure your database is connected and your dynos are configured.

Heroku app dashboard

DEPLOYING THE FRONTEND:

The process of hosting the frontend is much like the backend, but I think even more simple. In your terminal cd into your frontend app. Go through the process of making sure all changes and updates have been pushed to GitHub and your working tree is clean. Open your application.

In the terminal we’ll need to create another Heroku app with command: heroku create <your app name here>— buildpack mars/create-react-app

It is important that you ONLY use either node or yarn, but you CAN NOT use both. Heroku will let you know if you have used both, and many builds fail for this reason. Delete one of the two if this is the case for you. Again, heroku will let you know, but you might end up having to use a command like this to get you going: npm uninstall -g yarn . You’ll have to run the create command again, if so. Once that has completed, you will need to run all git commands: git add . / git commit -m “<your comment info here>” / git push AND THEN git push heroku . This app will go through the long process of pushing your application to heroku, and once complete you should see the ‘done’ message. If not, you’ll need to trace back any error messages to correct.

RAILS & REACT — THE DISCUSSION:

Because React will be making fetch calls to to Rails, and your app is now hosted with real live url addresses, you’ll need to change the frontend code to make the calls to the correct address. We want to be able to distinguish, though, that the app could either be making the calls locally, in development, or to live urls, in production. You can do this by setting constants where ever necessary in this manner. Make sure to save, and push to github and PUSH AGAIN to Heroku.

Your app needs to know where to make the fetch calls, whether your app is in production or in development.

Lastly, if you’re like me and you need to set secret keys (oAuth, etc), or api keys, you’ll need to do so directly in Heroku. You can still leave your keys in your .env files for development, but production will need to know where to obtain these keys. In your app’s Heroku dashboard, go to settings, choose ‘Reveal Config Vars’ and set up your keys and secrets here.

It will take a few minutes for your

Good luck deploying your apps! LMK if there’s anything I missed or can help with.

Live App: https://mainmoviesearch.herokuapp.com/

Github Frontend: https://github.com/osha7/yearone-api-movies-frontend

Github Backend: https://github.com/osha7/yearone-movie-api-backend

Written by

Software Engineer proficient in Ruby, Ruby On Rails, Javascript & React JS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store