So, you've made a really cool app. You've got Ruby on Rails running the backend API, and a beautiful, responsive frontend written in React. It's so good, that you can't wait to show it off to your friends and family. But, the problem is, it only runs on your local machine!
You're supposed to be a web developer! You have to put your app on the web! If only there was something who could save us from this predicament.
My Hero(ku)
Not my best, but it's staying
According to their website, "Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps — we're the fastest way to go from idea to URL, bypassing all those infrastructure headaches." It's a relatively easy way to host your applications, including a runtime environment, database management and a bunch of other features that are out of the scope of this write-up.
Best of all, it's completely free for hobby level users!
As great as Heroku can be, you need to have your project set up properly in order to get it to work well with the platform.
Before we get into it, a lot of this article will end up being links to other articles, tutorials and documentation. I could regurgitate all that information, but hopefully gathering and contextualizing these resources will be helpful enough.
Requirements
Before deploying to Heroku, there are several steps you should take, and some requirements that you'll want to make sure your app meets.
- Create a GitHub repos for your project (make separate repos for front and backend apps)
- Use PostgreSQL as your database
- Create a Heroku account (duh)
- Download the Heroku CLI
- Make sure your libraries are up to date (or the recommended version)
It may be possible to deploy without these steps, but this seemed the easiest way to get it working. The order you do these isn't terribly important, but make sure all requirements are met and your app is working before you attempt to deploy.
Create Github Repos for your project
If your project isn't already synced up to GitHub (or some other source manager), you're going to want to do that before you try to deploy it to Heroku. Git is the simplest way to push your code up to your Heroku, and you can easily manage changes between your local device and your Heroku apps.
However, when you are setting up your repos, make sure that you only have one app in each repository. Heroku will be able to automatically install dependencies and start your application based on your gemfile or node package, but the file must be in the root directory. It uses "buildpacks" which are language runtime specific and determines how to run your app. If there are multiple runtimes in your application, it won't be able to figure out which buildpack to use.
So, if your application is split into frontend and backend apps (Rails backend with React frontend, for example) split them into separate git repos.
Here is the Github documentation if you need help setting up your
repos.
Use PostgreSQL as your database
If you make a rails app using the rails new app-name, it will generate using sqlite3 as the default database. I have no problem with sqlite3, but Heroku does. You need to use Postgres or Heroku will throw a fit.
You can technically use different databases in your local and Heroku version, but it'll probably be easier to just use Postgres as the database throughout.
If you don't have Postgres installed on your local machine you can install it here.
If you're using rails (like me) you can use Postgres as the database by adding the d=postgresql flag when you scaffold a new rails app ( ex. rails new app-name -d=postgresql). If you already have an existing Rails app with a sqlite3 database, follow the instructions here
Create a Heroku Account
You can create a free account here. It should be pretty straightforward if you've ever signed up for anything before. Just follow the prompts and you'll be fine. Once you get to the dashboard you're good.
Don't worry about creating anything on the dashboard, we'll use the Heroku CLI to do that later.
Install the Heroku CLI
The Heroku CLI is going to allow us to create and then manage our apps right from the terminal. This is going to make uploading and running our app nice and simple.
Instructions on installing the Heroku CLI
Once you install the CLI, make sure to verify your installation and log in.
Make sure your libraries are up to date
When I first went to deploy my app, it failed because the application was running ruby 2.6, but the current Heroku stack (version 20 as of writing) expected Ruby version 2.7 or higher. The stack basically the operating system that your Heroku app is going to run on.
If your running older versions of Ruby, Rails, or whatever language or libraries you're using, you can either update your app dependencies to work on the current stack, or you can set Heroku to use an older stack (version 18 as of writing this). I'd recommend updating your app, but if you'd prefer to downgrade the stack you can do that as well.
Deploy that App!
If all the requirements are met, the deployment process should be super easy.
Start a new terminal and navigate to your project directory (if you are using separate apps for front and backend, you will need to repeat this process for each app)
In the terminal enter
heroku create -a app-name. The app name must be unique to all apps on heroku, so you may have to get creative to find an unused one. An app should be created in your Heroku account and show up in your account dashboard, and a git remote and heroku branch will be created for the current repository.Next, enter
git push heroku main. This will push your code to Heroku, where a buildpack will be selected, your dependencies will be installed, a "dyno" will be automatically generated and , if everything was set up correctly, your app will begin to run.
And that's it! Your app should deploy successfully, and you can visit it through your Heroku dashboard, or by using the URL that it was assigned.
Hopefully, by following these steps, the process of deploying was easy and painless. If you run into any issues with any part of the process... that sound about right.
Latest comments (0)