Deploy Rails and JavaScript To Heroku

I recently built a Single Page Application as part of Flatiron School’s Portfolio Project #4. The app utilizes a Rails API backend and a Javascript, CSS and HTML frontend. The code is stored in a single repository with two subdirectories:

Image for post
Image for post
A single repository with subdirectories for the frontend and backend.

So here are the steps I went through to successfully deploy a Rails API backend to Heroku and a JS frontend to Github Pages, from a single repository.

BACKEND

  1. Create a Heroku Account.
  2. Install the Heroku CLI in the terminal (mac install command shown):
    brew tap heroku/brew && brew install heroku
  3. Login to heroku:
    heroku login
  4. CD into the main directory of your code and create a new heroku app:
    heroku create gastropoda-api
  5. Set the remote:
    heroku git:remote -a gastropoda-api
  6. Then push the subdirectory you want to deploy:
    git subtree push --prefix gastropoda-backend heroku master
  7. CD to your backend, and migrate your DB:
    heroku run rake db:migrate
  8. Seed your data:
    heroku run rake db:seed
  9. Now your backend should be up and running! Run:
    heroku open which will bring you to:
    https://gastropoda-api.herokuapp.com/
  10. If you don’t have a root setup then it’ll say the page can’t be found. Since we are only using this as an API, you should be able to navigate to your API:
    https://gastropoda-api.herokuapp.com/api/v1/entries

FRONTEND

  1. Make a copy of your frontend (HTML, CSS, JS) files and put them in a new folder named docs within your main directory.
  2. In this new folder, change any fetch url’s you have and point them to your backend url.
    Ex: Change localhost:3000 to https://yourappname.herokuapp.com
    Then push these changes to Github.
  3. Goto your repository and click on “settings”. Scroll down to the Github Pages section. Under “source”, select “main”, then choose “docs”. Click Save.
  4. Github looks for an index.html in the docs folder. So if you have one in there you will now be able to view the frontend:
    https://yourgithub.github.io/repo-name/
    As long as your fetch url’s correctly point to your Heroku backend URL, everything should be working.
  5. If you are getting a favicon.ico error in the browser’s console, it’s because you haven’t setup a favorite icon image. You can easily resolve this error by adding the following line to the head of your index.html file:
    <link rel ="icon" href="images/gastropoda_logo_icon.ico">
    Find a .ico file through Google, or use your own logo/image and convert it to an .ico file. There are free jpg to ico, or png to ico file converters online.
Image for post
Image for post
The repository now has a new subdirectory “docs” which holds a copy of the frontend
Image for post
Image for post
Setting the Github Pages source to the new “docs” folder.

Enjoy!

Here’s my successful deployment:
https://dougschallmoser.github.io/gastropoda-js-app/

Find me on Github:
https://github.com/dougschallmoser

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store