Deploying a Rails/React app to Heroku
If you’re looking to take a project with a Ruby on Rails API backend & React frontend into production, look no further. Over the past few weeks I’ve been working to deploy a number of my projects onto the Heroku platform. Here I’ll outline the steps needed to move a simple application from the development stage to production stage.
When picking a platform to host my projects online Heroku seemed like the obvious choice. It had been recommended to me due to its ease of use and how quickly it could be up and running. So first things first, you’re going to want to sign up for Heroku! No worries though, its free to signup! Just go ahead and click this link and it will take you right to the sign up page. Should look something like this:
After confirming your email, setting your password and agreeing to their terms of service you’ll finally land on your dashboard.
Here’s where your journey begins. Go ahead and click the ‘Create New App’ button and let’s get started. It immediately prompts you to enter your ‘app-name’. In this example deployment I’m going to assume that the frontend and backend code of your application are decoupled and therefore most likely two separate repositories. Speaking of repositories, if you haven’t already uploaded your application to GitHub as separate repositories I would Highly Recommend It. Heroku offers you three separate ways to deploy your code onto Heroku’s servers. 1) Using Heroku Git and the CLI provided by Heroku, 2) Using GitHub and connecting it to an existing repository, or 3) using Container Registry for your Docker App. For this article we will be only using 2)as I believe it’s the most straight forward and easy to use.
So go ahead and click ‘GitHub’ as the method of deployment and connect it to your GitHub that houses the repo for your project. Search for your specific repo and once Heroku finds it within GitHub you’ll get a screen something like this:
You’ll see you now have two options: Automatic Deploys or Manual Deploy. Here I recommend if you’re comfortable allowing Heroku in conjunction with GitHub to take some of the work off your hands and enable automatic deploys. Now you have the option to choose which branch you want to actually deploy. You can choose your main branch for production and then have subsequent offset branches used for testing/further development or vice versa. Dealers choice. Just know that when ever you push changes to your ‘chosen deployment branch’ on GitHub it will trigger a re-deployment of your application with those changes on Heroku, for better or worse!
So pretty much everything is ready to go on Heroku’s side, now to talk about some things that you may have been using in development and how you might have to adjust them going into deployment. I’m lookin at you Databases, ActiveStorage, etc. As far as a database options go, PostgreSQL is a great option as it is supported out of the box (and free up to 10,000 rows) on Heroku. So for now just be aware that you’re going to have to migrate your schema, seed your database and all that good stuff once you deploy onto Heroku. ActiveStorage is a different story…
I’ve deployed two projects now that utilized ActiveStorage in development and have since removed that functionality from Rails once deployed. Suffice to say it was a headache. Huge. I’ll just leave it at that and I’ll be writing another blog post soon about how I simply cut out the middle man of ActiveStorage and began sending things straight to AWS s3. But more on that another time. For now lets go ahead and hit that deploy button and get Heroku adding your Backend Application to their Servers!
Heroku will then build your app and let you know once it’s finished and deployed. Now for my simple example I used PostgreSQL for just a single table for my Post model. But from the main landing page for your newly built app, the easiest way create, migrate, and seed your DB on Heroku is to click the ‘more’ button in the top right corner and then click the ‘run console’ option.
This will open up a console directly on Heroku that you can use as you previously did your own CLI in development. Having PostgreSQL singled out as your DB of choice within your config/database.yml file should have already told Heroku to build a database, so you can skip rails db:create, and go straight for rails db:migrate within the console.
Be aware that if you were to do this within your own CLI off of Heroku’s site you would just need to install Heroku’s CLI and login in. More info on that can be found in their docs here: https://devcenter.heroku.com/articles/heroku-cli.
With your new DB migrated, you can then of course rails db:seed if need be or execute any other files/calls you need to populate your DB. But with this last step your basic backend application is set up! Now on to the frontend.
The initial steps for uploading your frontend application to Heroku are identical to what we did for the backend, with one small change, which we’ll get to in a sec. First off, unlike the backend, unless you plan on buying a specific domain and using that for your frontend, be aware that whatever you name your frontend app will be in the URL + herokuapp.com, so best to keep it short and sweet.
Now before we go ahead and connect our GitHub repository one important step we should do is specify the Buildpack. Normally Heroku is very good at just identifying what language you’re using and will build accordingly. However, if you’re like me, I generated my React frontend using ‘npx create-react-app’ which took care of a lot of the boilerplate stuff for me. Heroku therefor detects JavaScript as the language and tries to build it using Node.js, which we don’t want.
Rather than refactoring your code and package.json it’s easier to just specify the Heroku Buildpack option. This can be found by going to settings and scrolling down to Buildpacks, then pasting in this line:
https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz
Now we’re ready to go back to the ‘Deploy’ tab and connect to our GitHub repository just as we did before. Choose whether you want it to auto deploy just as we did before and then go ahead and have Heroku build your frontend app! In the past I have had some issues with package.json & yarn.lock clashing, usually due to conflicting dependency versions so just be on the lookout for that. But besides that once it finishes building you should be able to open your brand new app and actually use your frontend! Now, don’t be surprised if everything crashes right away, there is one more step that you most likely need to do, which is to alter your fetch calls to your backend. Since you’re now hosting your backend and therefore database on Heroku, your frontend now needs to call out to that instead. It can be tedious but everywhere you were fetching to (‘http://localhost:3000/’) you now need to fetch to (‘https://your-app-name/herokuapp.com/). But with that refactor done and pushed to GitHub, which should trigger a re-deploy of your backend app, you’re done!! And you’ve successfully deployed your app onto Heroku!
In my next blog post I’ll try and cover some more trouble shooting issues I’ve run into with going into production on Heroku and how to solve them. Feel free to leave comments if you have any questions!
[1]: Heroku Deployment Docs(https://devcenter.heroku.com/categories/deployment)
[2]: Heroku Rails Docs (https://devcenter.heroku.com/articles/getting-started-with-rails6)
