Heroku and GitHub Pages — How to host a Rails Backend and React JS Frontend

This is a sequel of sorts to my previous guide to hosting a Ruby on Rails backend and a vanilla JS frontend using Heroku and GitHub Pages. Since writing that article, my Flatiron School classmates and I have moved to building React frontends for our projects, necessitating an updated guide. Once again, there was no single article I could find on the internet which detailed all the necessary steps so I decided to make one.

React requires additional steps because GitHub Pages will default first to an index.js file, which vanilla JS projects have and React projects do not, and if it does not find one it will default to the README file. This can be frustrating and mysterious when trying to host a React project because there is no indication as to why the README is being displayed. Steps 20 and beyond address this issue.

1. Make a Heroku account.
2. Install the Heroku CLI.
   Note: for me, the only installation method which worked was the one Heroku “strongly recommended” not to choose:
   $ npm install -g heroku
3. Log into your new Heroku account with $ heroku login
4. In your back end, navigate to config/environments/production.rb and ensure these two pieces of code are included somewhere in there (Rails may have included them on its own):

5. In your Gemfile,
Add gem 'rails_12factor', group: :production

6. If your project uses SQLite as a database, you will have to include and configure a gem to allow Heroku to use PostgreSQL instead. If you’re curious why, you can read about it on Heroku’s website here.

6a. In your Gemfile,
Change gem 'sqlite3' to gem 'sqlite3', group: :development
Add gem 'pg', group: :production

6b. In config/database.yml,
Add the PostgreSQL adapter:

production:
  <<: *default
  adapter: postgresql
  database: db/production.sqlite3

6c. Check your migrations. You may have to make some changes to make them compatible with PostgreSQL.

Make sure no tables with foreign keys (such as join tables) are declared before the tables their foreign keys are referencing. SQLite is fine with this but PostgreSQL is not. If you have to reorder them you can simply rename the migration files.

Also if you have any migration files which change the datatype of a column, you will have to change how they are written. PostgreSQL will throw a DatatypeMismatch error suggesting HINT: Specify a USING expression to perform the conversion.
For example, change (sqlite format):

change_column :table_name, :column_name, :integer

To (postgres format):

change_column :table_name, :column_name, 'integer USING CAST(column_name AS integer)'

7. Install the new gems by running $ bundle install

8. Commit your changes:

$ git add .
$ git commit -m "Heroku setup"

9. At last it’s time to create your Heroku app:

$ heroku create

10. Push your code to your new Heroku app:

$ git push heroku master

Note: if you are trying to push from any branch other than master, you will need to push like this instead:

$ git push heroku branch-name:master

Second note: if your push to Heroku was rejected it may be because your Ruby version is incompatible with the default (latest) Heroku stack. If this is the case the error message should list the stack attempted (for example, heroku-20) and list some compatible versions (for example, heroku-18). You can change to a compatible version like so:

$ heroku stack:set heroku-18 

Replace heroku-18 with whichever version the error message recommends. Then attempt to push again as above.

11. Now you can run your migrations on Heroku:

$ heroku run rake db:migrate

12. If your project uses seed data, it’s time to seed:

$ heroku run rake db:seed

13. Ensure a dyno is running:

$ heroku ps:scale web=1

14. Verify that your back end is now served live on Heroku by typing $ heroku open and navigating to any GET route your Rails project serves an API to (for example, your-heroku-url/users/ for a “users” index).

15. Time for the front end, which we will be hosting directly on GitHub.
Create a brand new repo on GitHub and copy its HTTPS clone link, not its SSH link.

16. In your front end, set the HTTPS link you copied as the git origin:

$ git remote set-url origin <HTTPS link, not SSH>

17. Change your base API URL in your front end to the Heroku URL where your back end is being served. For example, in my project I changed

const URL = "http://localhost:3000/"

to

const URL = "https://my-randomly-generated-heroku-link-555.herokuapp.com/"

18. Push your front end to your new GitHub repo:

$ git push -u origin master

Or, again, if you are pushing from a branch other than master:

$ git push -u origin branch-name:master

19. Go to your new repo on GitHub and click Settings. Scroll down to the section titled Github Pages. In the dropdown menu underneath where it says Source, select master (the branch you want to host) and hit Save. You should see a link to your newly-deployed project above. Click it and you should be confronted by your project’s README!

20. Now onto the React-specific stuff. First you’ll have to go to where you define the React Route for your homepage. It should look something like this:

<Route exact path="/" component={HomePage} />

You’ll have to duplicate or alter this line to accommodate the new path your GitHub Pages will deploy to:

<Route exact path="/your-project-repo's-name" component={HomeContainer} />

21. Now we’ll install a package to handle deploying to GitHub Pages for us:

$ npm install gh-pages --save-dev

22. Copy the GitHub pages link where your project is deployed from step 19. In your package.jsonadd ahomepageproperty and paste the link at the very top, should be on line 2 like so:

1 {
2     "homepage": "https://you.github.io/your-app" 

23. Now scroll down inside package.json to the scripts section and add predeploy and deploy properties inside scripts like so:

"scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
...

24. Now we can use the package we installed and the script we just made to automatically compile and push a GitHub pages branch:

$ npm run deploy

25. Finally, navigate back to your GitHub repo’s Settings and change the Source dropdown to the new gh-pages branch! Hit Save and you’re done. You may have to wait a few minutes for your newly-deployed app to appear at the link.