Deploying your web app to THE INTERWEBS
Using Heroku, their CLI, and GitHub
I made my final project at Flatiron school using Rails for the backend API and React for my frontend. I had a go at deploying the project online and wanted to share my step-by-step tips!
Before we start
You’ll need some experience with Rails, GitHub and the console for this blog to helpful — but if you’ve made your own app already I’m sure you’ll understand terms like migrate, seed, Git push, etc. If you need any clarification please comment below and I’ll help out!
Having a separate repo for your backend and frontend is essential for this to go smoothly, as you’ll be deploying them separately.
Also, using Postgres as your database server in production makes deploying to Heroku much easier. Heroku explains why here.
Make sure your app is working locally, make a commit and push to your GitHub. You’ll be choosing which branch you want to deploy, so if you have more than one, remember what you called it.
Let’s go!
- Sign up to Heroku. Find the ‘create new app’ button and fill in the form. You’ll see a page like this shown in the image below. I selected the button to link to my gitHub. If you want to use the Heroku CLI to deploy — follow the instructions they give you :) It’s handy to have the CLI anyway because you’re going to need it to migrate and seed your database once it’s deployed.
- Enter the name of the repo you want to deploy.
- Select which branch of your repo you want to deploy and select ‘Deploy Branch’.
You’ll see Heroku run a build and give you a log of what it’s doing:
Read the build log.
You may get some complaints on here about Ruby versions. Heroku only supports certain versions (definitely version 2.6.3 at the time of writing) so you may have to download the latest version and change your application’s Ruby version →
- Head to your project’s Gemfile, add Ruby version 2.6.3
- Run bundle in the terminal
- cd into your project folder and change the Ruby version you are using by entering the following into your terminal:
rvm use 2.6.3
- Git add . — git commit — and push again so your branch is up to date with the changed Ruby version :)
- Hit deploy branch again
Now it’s time to migrate and seed your database!
Go to your terminal and enter the following two commands:
heroku run rake db:migrate —-app (enter project repo name here)heroku run rake db:seed --app (enter project repo name here)
And that should do it!
Once your backend is deployed Heroku will give you a link to your url! Remember this is the base URL, so if your endpoints are “http://localhost300/puppies” — you’ll need to add “/puppies” to your Heroku base URL to see any of your data.
Yay! A hosted API on Heroku!
Now let’s tackle the frontend.
Now we know how to use Heroku, this part is simple.
Wherever you make API calls in your code you are now going to paste your Heroku hosted backend URL.
For example:
http://localhost300/api/v1/blahwill now becomehttps://project-name.herokuapp.com/api/v1/blah
Hopefully, if you’re well-behaved, you will have made a variable called BASE_URL and used that in your API calls so you don’t have to paste this new Heroku URL more than once.
Using your terminal, cd into the frontend project folder and Git add . Git Commit and Git Push the changes you made. You’re ready to repeat the steps in this blog to deploy your frontend to Heroku!
I hope this is useful! Please comment any questions below, and giz a few claps while you’re here.
Have fun deploying your creations!
