Hosting your Rails Projects to Heroku

#rails #ruby #javascript #codenewbie

You've finished a personal project and you feel great! The project looks good, there aren't any bugs, and you want to show everyone. You can share your github link, but it's hard to really gauge a project by just looking at the code. Your non-technical friends will have no idea of the work you just put in, and prospective companies won't spend enough time looking at your project. The solution? Host your project!

There are many different ways to host your project (for free!) on the internet. If you are hosting a professional/production site, you will want to pay money for a better site. Heroku, for example does not have the ability to handle a lot of traffic or a lot of storage on their base plan. The your app will be quite slow, as it needs to start up when someone requests the url.

You can host any variety of sites on heroku, including a static rails app, react apps, and node.js apps. I'll be going over how to host a rails site or rails API, and suggest how to host your front ends as well.

Prerequisites:

Git installed and project initialized in a git repo
Site and code is ready to be hosted (no bugs or errors)
Create a heroku account
Install heroku on your computer

For Mac users:

brew tap heroku/brew && brew install heroku

heroku login

Make sure your api keys are hidden!
If you are using database, you can't use SQLite, the default for rails. I suggest using PostgreSQL. If you didn't initiate your application using PostgreSQL, you can follow Tori's tutorial here to switch over.
If you are using active storage, then you will need to use AWS/Azure/GCP to store your data. If you leave it as local, then files will not persist. You can follow the Ruby Guide here on how to configure your cloud storage.
We will be using your remote master branch as the branch we push to heroku, so make sure that it is up to date with your latest changes.

The Setup

If you've made sure to do all the prerequisites, then you are most of the way there! I suggest when starting a new personal project, to make sure that you are optimizing your project to be hosted, rather than trying to reconfigure things at the end. Here are the steps to get your project hosted:

From your terminal, cd into your project repo
If you've set up heroku on your machine properly run:

heroku create name-of-project

After create, you pass in the name of your project. If you simply just use heroku create then it will receive a default name which you can change later.

Again in your project director terminal, run:

git push heroku master

This command is pushing your git remote master branch to the heroku remote server. If this doesn't work, (which is usually the failure point) Make sure all of the prereqs are true. The error messages provider usually give you an action item to follow if it is unable to push.

You'll need to make your database now on your heroku app:

heroku run rails db:migrate

If you are encountering issues here with postgreSQL, then you can try running heroku pg:reset. Again, if your app is not configured properly, you will need to follow the errors.

If you have seeds in your seed file, make your seeds:

heroku run rails db:seed

If you have gotten this far, run heroku open to view your app! If you are using rails as a static site, this should be sufficient for running the app. If you are using it as an API, then you should be able see the json if there is no authorization require. If you require auth to see your data, you'll need to fetch it the normal way using your front end, or using postman with a token!

Next Steps:

If you need do add sample data to your site, share it with your friends and family to make posts and comments. If you are using this as an API, then you will need to host your front end too. If your frontend is just vanilla javascript, then you can use github pages. You can go to the frontend directory, settings, then pages and set the branch you would like. Make sure you change your fetch requests to be to your new backend location. The pages will be available on the environment tab on your repo.

If you are using react, angular, vue or similar for your frontend, then you can choose where to host that as well. You can host the frontend app to heroku as well, following similar steps. I hope that this helps you get started, and have a better project portfolio!