How to Deploy a React Front End/Rails Back End Project to Heroku
Posted On July 2, 2019
Deploying apps is a great sort-of-final step to setting up your portfolio project. Github links and video demos are truly nice, but actually interacting with your site is where the fun really is. If you’re just finishing up your software bootcamp experience, and if you’re looking for info on a Rails Back End for your React app that means you probably are, showing off a functioning site on your CV is a nice little bonus.
Heroku is a great option for hosting your deployment build. I believe it runs on AWS anyway, so either way we’re using Amazon. Heroku is very easy to setup and maintain, so there’s a lot going for it in that department. There are two main ways to set up your project on Heroku. I will be detailing the BASH/terminal way because dammit we’re programmers now.
Before we begin converting our front and back ends to Heroku, we need to first install its CLI locally. It’s easiest to just download and install for your OS, but if you’re on a Mac you can home-brew it, too, with:
brew tap heroku/brew && brew install heroku.
You also need to create a login and profile on the Heroku website. You can manage all your projects easily from your developer panel. It’s free. Once you have login credentials and have the CLI installed locally you can access Heroku in your terminal by using the heroku command.
DEPLOYING YOUR RUBY ON RAILS BACK END
Login into Heroku in your terminal by typing heroku login
Make sure your Rails API is built on at least version 5 and that your database is Postgres. You can check your rails version with rails -v. Upgrade your rails version if needed. If you’re riding on SQLite, switch out that gem with gem 'pg' to switch to PostgreSQL and re- bundle install. If you’re still having problems you might need to fiddle with your config/database.yml or pray to any god who might care. Google typically listens.
Your app needs to be on Git. I’m assuming it is.
In the directory your Rails back end is in, run heroku create. You can check that it worked by typing git config --list | grep heroku. If you see an error, hit google or Heroku docs. Otherwise, you’re set.
Deploy your code by typing git push heroku master.
This is your backend API, so you will likely have some DB’s to migrate and populate. You can do this as you normally would, but with some heroku sprinkled in. heroku run rake db:migrate and heroku run rake db:seed.
Your Rails API back end should be basically set up. You can log into your Heroku developer panel and toggle settings around, too. Anytime you want to push a change, just do what you normally would with Git, but push to heroku master. You can also change the settings so that your normal git pushes are automatically sent to Heroku.
DEPLOYING YOUR REACT FRONT END
You will first need to create a production build with npm run build or yarn run build. If you try to upload your app onto Heroku without a production build you will be introduced to a good amount of different errors.
If your front end is in a different directory from your Rails, you’ll want to login to Heroku from the React app directory.
You will again run heroku create to create a Heroku directory for your React App front end.
Deploy your front end to Heroku with git push heroku master.
I will be honest, you will likely get some errors. 99% of them will have to do with your package.json file. Google the errors to see what you need to add, but it will usually have something to do with specifying node or npm versions, that kind of thing. Once all that is sorted just push those changes back up to Heroku again.
If you are fetching or axiosing (with rails you’re fetching) from your backend, you will need to change all those request addresses to match the new Heroku-hosted ones. You can check you dev panel for your back end directory and it should have those routes out for you to use. Once you’ve changed around the routes, just push those changes back up and you’re golden.
We should be done! Deploying to Heroku is that simple. There’s an even easier way than using terminal. You can just use the Heroku developer panel to sync up a directory with a github repository, and then it will just automatically update and deploy the changes. This method is incredibly intuitive, and you just need to follow the prompts on the site.
But I didn’t show you that to being with because we are programmers dammit, and we’ll use terminal. Happy coding!