Host a React and Rails API Application

One of the best things about being a software engineer is bringing ideas to life. The more advance you get, the harder it is to keep your projects to yourself. In this article I want to layout a simple guide to getting your project out to the masses. I will talk about using a mix of heroku and GitHub pages. I will discuss how to get them to work together and some common gotchas when hosting.

Assumptions

I am going to make a couple assumptions with this article. I want this to be a quick reference for when you decide to host. I won’t waste your time describing how to create-a-react-app or how to create a rails api.

I am going to assume

you have already created your react app

you have already created your rails backend and developed your schema for your database

your rails application database is using Postgres NOT Sqlite 3

you already have separate GitHub repositories for the frontend and backend

you already have a Heroku account

If you do not have any of the above assumptions, make sure you achieve this setup before continuing. Once your ready lets get started!

Things to Consider

I use Heroku and GitHub pages due to their flexibility and cost. Before we begin, we need to assess our application to decide what is the best way to host. Our backend will always be hosted on Heroku. We use Heroku because it will give use access to a database for our application. We have two options for our React portion. We can use either GitHub pages or Heroku. So when do we use what? I prefer to use Github pages for single page applications that do not use react router. I like GitHub pages because once setup, one command will host your application and with the same command, we can push our changes to the production page. Also, GitHub pages is always awake ready for visitors. If your application uses react-router, we need to make sure to use Heroku. You can actually use Heroku for any react application but the one down side to Heroku is their dynos sleep. This means that if you do not have traffic for a 30 min period the application goes offline. If you get traffic, it will turn back on but it takes some time. You can fix this by purchasing a hobby dyno but I like free : ). So in general, backend always on Heroku and the React app can be either depending on if you used react router.

Quick Notes on Maintaining Your Project

I am a big fan of using branches to organize my code on GitHub. I always have two branches, a development and production branch. You can name them whatever you want but makes sure you have two incase anything bad happens. If you are not sure how to do this, check out my GitHub Intro article on the topic. I will use the production branch for all my hosting. I will make changes and test in my development branch. Once everything is working, I will merge the branches and then redeploy the production branch. This will insure you always have working code hosted and you can easily maintain and expand your application.

Hosting React app to Github pages

Okay, let's get your react app hosted live. Github makes this process very simple we just have to make sure our application is setup correctly.

Install Github pages npm install gh-pages —save-dev

Add some properties to your package.json file

• “homepage": “http://{username}.github.io/{repo-name>}
• Inside the scripts section:
• “predeploy”: npm run build”
• “deploy”: “gh-pages -d build:

In your terminal npm run deploy

this will create a production build of your react application and also create a new gh-pages branch where it will store this build.

Now go to github repo to make sure everything is working properly

• go to setting => pages and make sure that your source is gh-pages and that the box above it is green with you live url.

Doing the above steps should get your application hosted for anyone to use. You can also set a custom domain name if you have purchased a domain.

Hosting a React app to Heroku

There are a couple of different ways to host your React app on Heroku. You can view these options in your Heroku account. The easiest way is connecting with GitHub and deploying straight from there.

Create new app on your Heroku dashboard

In the deploy section select Github

Search for your repo and connect

You can do automatic or manual. Depends on how you manage your branches and how often you want to update. I usually do manual for personal projects.

Chose your production branch and click deploy. this will build a production build of your application and host it.

Yep, it's that simple. To make changes to your site just commit your changes to your hosted branch and redeploy. Just remember that the dynos will go to sleep and take a bit to wake up with the free dyno.

Hosting Rails API to Heroku

There are two different ways you can deploy a rails app. You can do it the exact same way as your React application or through Heroku Git. I prefer to use GitHub unless I have some information that I am hiding from GitHub like API keys etc. To setup with Github, just follow the same exact steps in the React app to Heroku above. To use the Heroku Git follow these steps. The official docs can be found at https://devcenter.heroku.com/articles/getting-started-with-rails6

Make sure you have Heroku CLI installed this varies depending on your OS so check out the docs for instructions https://devcenter.heroku.com/articles/heroku-cli#download-and-install

Login to Heroku: heroku login

Create our Heroku app: heroku create

Deploy your code: git push heroku main

Migrate your database: heroku run rake db:migrate

Visit your application: heroku open

The above will create an application on Heroku and host it. You can manage the application on Heroku. When you make changes to your code just make sure you're in the same branch as above and git push heroku main.

Some Common Gotchas

You mat get an error that your rails/ruby version is not supported by the current Heroku stack. You can fix this by either upgrading the application or changing the stack. To change the Heroku stack. In the correct branch, heroku stack will show you the available stacks heroku stack:set <new stack to switch to> This will switch to a new stack. Now try to redeploy.

API keys: if you have your api keys hidden in a .gitignorge or .env file make sure to add them to your config vars. You can do this by going to Heroku app setting tab. In this tab, you will see config vars. Click reveal config vars and add the api key there.

If you have cors.rb file make sure to update with the new url that you have for your frontend. I have spent hours trying to figure out why my frontend wasn’t talking to my backend because of this... So make sure to update your cors.rb.

Also, make sure to update your fetch urls on your frontend

Again, make sure your rails db is setup for Postgres and not the default Sqlite3

I hope you find that helpful and use it as a quick reference when you decide its time to share your projects with the world. If you enjoyed this please share it with your friends!