How I Deployed a Rails Backend API and React Frontend on Heroku
In this post I’m going to go through the steps I took to deploy my app to Heroku. This is meant to be a basic guide as deploying in Heroku can become quite involved depending on the situation.
This post assumes you have already created the following:
- A Rails backend using a PostgreSQL database (Ruby on Rails uses SQLite3 by default so you have to convert your database from SQLite3 to PostgreSQL if you did not begin with PostgreSQL),
- A Frontend app
- A Heroku account
As per convention, your backend and frontend should be two separate repositories. Each of these repositories will have its own deployment in Heroku. Let’s begin with the backend.
The Backend
Once you are logged into your Heroku account navigate to the top dropdown and click on the button that says “Create app”. Once clicked, you will be prompted to enter a name for the app (I named the app “exsample-app” for this example).
After creating the app, you will be automatically redirected to the “Deploy” tab in the dashboard. Here you can pick which deployment method to utilize. I deployed using the Github method but you may also use the Heroku Git or Container Registry methods.
Heroku will prompt you to enter you repository name so they can be linked. Choose which branch you would like to deploy ( I recommend the master branch) and enable automatic deploys.
Once you are finished click the “Deploy Branch” button and Heroku will begin the build. Once that process has finished your backend app has officially been deployed!
The Frontend
Deployment of the frontend is very similar to the backend. Before deploying the frontend, however, be sure to change any calls your frontend makes to the backend via a URL to the URL of the newly deployed app. Usually for development purposes the URL is http://localhost:3000. Change this URL to, in this case, https://exsample-app.herokuapp.com/. If you used versioning for potential subsequent API revisions make sure to include the version in the URL (https://exsample-app.herokuapp.com/api/v1).
Note that the name you give your frontend app under “App name” will be the URL address when it has deployed, however, Heroku allows you to rename it later. After you have made these changes repeat all the previous steps and once Heroku has finished building, you should have a live frontend that talks to your backend!
Checking That Your Frontend and Backend are Connected
One of the coolest tools Ruby on Rails offers is the console command. Running rails c allows us to interact with the application from the terminal and gives developers a quick way to test that their application is working properly. Now that your frontend and backend are deployed, lets check whether they are talking to each other.
Running the heroku pg:psql -a <name of your backend app> will connect you to the deployed backend database. You should be prompted with
<name of your backend app>::DATABASE=>Now we can start running SQL commands to check what data has persisted in our backend. If you aren’t familiar with SQL commands but are familiar with Ruby commands, simply run your rails console in another terminal with the commands you want (e.g. User.all ) and the rails console will show you the results of your query.
[10:07:36] (working) stock-app-backend
// ♥ rails c
Running via Spring preloader in process 92464
Loading development environment (Rails 5.2.0)2.3.3 :001 > User.allUser Load (15.0ms) SELECT "users".* FROM "users" LIMIT $1 [["LIMIT", 11]]=> #<ActiveRecord::Relation [#<User id: 1, name: "Emily", username: "emily"...
You will also notice that Rails is kind enough to show what the SQL command equivalent is (in the above example it’s: “SELECT “users”.* FROM “users” LIMIT $1"). Simply copy and paste this command into the deployed database terminal, remove any $ and add a : at the end of the command
<name of your backend app>::DATABASE=> SELECT "users".* FROM "users";and a queried table with the information you want should show up.
stock-app-backend::DATABASE=> SELECT "users".* FROM "users";
.
.
.
id | name | username | password_digest| created_at| updated_at---+------+----------+----------------+-----------+-----------1 | Emily | emily | $2a$10$0xOYFBiK3mmZXKhFiAU4sOdeYg.iJny3aIzcKIVwHSkDQkxW8y9nK | 2018-08-29 20:58:20.661978 | 2018-08-29 20:58:20.6619782 | John | john001 | $2a$10$HLeISVeyA7KelWcHSH6DxOkK7IfH2g2qDKh/vTX/ahawjdGqepf4W | 2018-08-30 00:50:19.536609 | 2018-08-30 00:50:19.5366093 | Jane | jane021378| $2a$10$ClsUwFTyY.sPU.7jhXGcEukEawao8BVbp15j1RQbd3WkGKJXudIwe | 2018-08-30 00:54:43.999509 | 2018-08-30 00:54:43.9995094 | Val | val | $2a$10$.RwsESj3sH2kWQBdB38Qku29gyYcs7fRX5QacpT/1RjJiJPKHxDTS | 2018-08-30 01:28:03.624552 | 2018-08-30 01:28:03.624552(4 rows)
If creating test users in the deployed website shows up in the database then you know your deployed frontend and backends are connected!
