DEV Community

loading...
Cover image for How to deploy a Rails API with a Vanilla JS frontend using Heroku and Github Pages

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

mmcclure11 profile image MMcClure11 ・3 min read

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'] %>
Enter fullscreen mode Exit fullscreen mode

(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: Alt Text
  • Regardless of if you have a root, you can navigate to one of your endpoints to see your json response Alt Text
  • 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`;
Enter fullscreen mode Exit fullscreen mode
  • 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 Alt Text
  • Scroll down to the Github Pages section
  • Change branch from none to master and click SAVE
    Alt Text

  • 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!
    Alt Text

  • 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.

Happy Coding!

Discussion (2)

pic
Editor guide
Collapse
tolentinoel profile image
Ellaine Tolentino

Thank you for this! Helped me deploy my project!

Collapse
mmcclure11 profile image
MMcClure11 Author

Glad this was helpful Ellaine!!