How to deploy a Rails API with a Vanilla JS frontend using Heroku and Github Pages

#rails #javascript #heroku #github

I have successfully deployed an app for the first time and wanted to share with everyone how I did it so other's can maybe avoid some of my pitfalls along the way.

This assumes that you have a Heroku account, have configured your computer to access Heroku via the CLI, and two Github repositories(frontend and backend split apart).

Reconfigure SQLite3 database to postgreSQL (if you made your rails api with postgres initially, skip to step 2)

Remove gem ‘sqlite3’ in gemfile
Replace with gem ‘pg’
Run 'bundle install'
Delete sqlite database from db folder
In your config/database.yml replace sqlite3 adaptor references with postgres

default: &default
 adapter: postgresql
 encoding: unicode

 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
 <<: *default
 database: witchy_wardrobe_backend_development


test:
 <<: *default
 database: witchy_wardrobe_backend_test

production:
 <<: *default
 database: witchy_wardrobe_backend_production
 username: witchy_wardrobe_backend
 password: <%= ENV['WITCHY_WARDROBE_BACKEND_DATABASE_PASSWORD'] %>

(Note: I copied a file from a project where I initially built the api with postgres, there is a lot more commented out information that I removed here.)

Run 'rails db:create'
Run 'rails db:migrate'
Run 'rails db:seed' (if you are using seeds)
Test that your app is still working. Don't forget to commit your changes!

Connect the Rails API to Heroku

In your console run 'heroku login'
Once logged in (you may be redirected to a browser to enter in you Heroku password) run 'heroku create name-for-your-api' (I used 'heroku create witchy-wardrobe-api')
Run 'git push heroku master'
To connect up the database with a heroku database run 'heroku rake db:schema:load'
Run 'heroku rake db:migrate'
Run 'heroku rake db:seed'
Now you should be able to navigate to https://name-for-your-api.herokuapp.com/ (https://witchy-wardrobe-api.herokuapp.com/)
Unless you set up a root route in your routes.rb and build corresponding controllers, actions, and views, you will most likely see:
Regardless of if you have a root, you can navigate to one of your endpoints to see your json response
Check out Latest Activity at your Heroku site for potential deployment errors: https://dashboard.heroku.com/apps/name-for-your-api

Prepare your frontend to use your new backend api

You likely have a number of functions in your application that fetch data from your API, and all of those will need to be changed to match the Heroku URLs. In my case, I had already defined a constant for my backend URL, so I only needed to update one URL, changing it from localhost:3000 to my new URL below:

index.js

const BASE_URL = 'https://witchy-wardrobe-api.herokuapp.com';
const ITEMS_URL = `${BASE_URL}/items`;
const CATEGORY_URL = `${BASE_URL}/categories`;
const OUTFITS_URL = `${BASE_URL}/outfits`;

Commit and push up this change to your Github

Setup Github.io pages for your frontend

You can follow the instructions on Github Pages, if you do this be sure to change from 'User or Organization Site' to 'Project Site'
Go to your Github Repository for your frontend and go to settings
Scroll down to the Github Pages section
Change branch from none to master and click SAVE
Navigate to http://username.github.io/repository (https://mmcclure11.github.io/witchy-wardrobe-frontend/#)
If all went well, do a happy dance! Woohoo! Congrats! You’ve deployed a project! Tell all your friends and family!
Be sure to check out that your functionality is working. I had an issue where my frontend kept sending requests to localhost:3000 instead of my new heroku URL even though there were no signs of localhost:3000 in my frontend any where. After opening and closing and refreshing several times it started sending requests to the correct URL and all functionality was up and running.