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.
- Create a Heroku Account.
- Install the Heroku CLI in the terminal (mac install command shown):
brew tap heroku/brew && brew install heroku
- Login to heroku:
- CD into the main directory of your code and create a new heroku app:
heroku create gastropoda-api
- Set the remote:
heroku git:remote -a gastropoda-api
- Then push the subdirectory you want to deploy:
git subtree push --prefix gastropoda-backend heroku master
- CD to your backend, and migrate your DB:
heroku run rake db:migrate
- Seed your data:
heroku run rake db:seed
- Now your backend should be up and running! Run:
heroku openwhich will bring you to:
- 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:
- Make a copy of your frontend (HTML, CSS, JS) files and put them in a new folder named
docswithin your main directory.
- In this new folder, change any fetch url’s you have and point them to your backend url.
https://yourappname.herokuapp.comThen push these changes to Github.
- Goto your repository and click on “settings”. Scroll down to the Github Pages section. Under “source”, select “main”, then choose “docs”. Click Save.
- Github looks for an
docsfolder. 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.
- If you are getting a
favicon.icoerror 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
<link rel ="icon" href="images/gastropoda_logo_icon.ico">Find a
.icofile through Google, or use your own logo/image and convert it to an
.icofile. There are free
jpg to ico, or
png to icofile converters online.
Here’s my successful deployment:
Find me on Github: