Heroku - How to host a Rails Backend and Javascript Frontend

Deploying my first combined Rails/JS project on Heroku was a journey. Since there was no single article I could find on the internet which detailed all the necessary steps, I decided to make one.

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

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 index.js file 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.