Production: Forem on Heroku

After a couple of discussions in my previous post, I concluded to provide a copy-paste guide, but in this guide, I'm choosing GUI over CLI which have less copy-paste and will be beneficial for beginners.

This guide will look into how to host Forem in Heroku using the GUI rather than the traditional developer-friendly Heroku CLI. All you need to have is a Heroku account.

While writing this guide, I parallelly crated a Forem to make sure everything is working in order. This is the Live version of production Forem, if you follow this guide.

Requirements

1. Heroku Account with enabled billing (Just a verification)
2. Github account and a fork of official Forem
3. Honeybadger account for its API
4. And some effort to follow along with this guide

Configuring our Code

Use this link, i.e., the official Forem repository and fork it into your own Github account. Once the fork is done, we are going to make some changes to the repository. If you prefer fewer interactions with the code, you can also prefer forking my repository, which will be compatible with the official Forem with one important change, which I will discuss in the next step.

Some changes to Forem code

You could skip this step if you forked my repository.

All we have to do is add the following two lines at the bottom of config/databse.yml. As you can also see, they are self-explanatory.

prepared_statements: false
advisory_locks: false

If you have any issues, you can have a sneak peek at this URL and scroll down to the bottom, or you can also copy-paste this entire code in your config/database.yml and commit changes.

Configuring Honey Badger

Open your account and create a new project with your preferred name and Ruby as language. Once it is done, go to the API Keys section and store that value of the key, it will come in handy when we configure our environment variables.

Configuring Heroku

Login in to your Heroku account, and once you are in the dashboard, follow these steps.

Create a new app with your desired name and location. After the creation of the app, you will be redirected to the deploy tab of your app. Here you should link your Github account and attach our fork. Before doing deploying the code, we need to configure Heroku, so go to the resources tab.

Configuring app settings

Addons

Within the resources tab, you can see a section for Addons, now search for these two Add-Ons one after one(Heroku Postgress and Heroku Redis) and install them (press the Submit Order Form button). Don't worry; even if Heroku asks for your card details, both the addons have a free plan, and by default, it is free. In case if you haven't updated your billing section, it is time to update it. You can find the billing tab in your profile settings menu.

Adding ENV variables and Buildpacks

Now go to the settings tab of the app (not your profile settings). Within this tab, we focus on two sections(Config Vars and Buildpacks).

First, reveal the config var section; here, you can already see three configured variables, which resonates with our previous step(Configuring Add-Ons). Now it is time to manually configure a few ENV variables.

APP_DOMAIN: (app_name).herokuapp.com
APP_PROTOCOL: https://
COMMUNITY_NAME: (app_name) or (anything you wish)
FOREM_OWNER_SECRET: (think it as a secondary passsword)
HONEYBADGER_API_KEY: (you need this, we stored it earlier)
HONEYBADGER_JS_API_KEY: (same as HONEYBADGER_API_KEY)

Don't worry about any other ENV variables like RAILS_ENV, RAKE_ENV, SECRET_KEY_BASE, .... All those will be automatically generated.

Now it is time to configure Buildpacks, so go to the Buildpacks section within the app settings, below the config vars section. Now here, the order of adding Buildpacks is very important, so copy-paste the following URLs one by one in order by clicking Add buildpack button.

1. https://github.com/heroku/heroku-buildpack-nodejs.git
2. https://github.com/heroku/heroku-buildpack-pgbouncer.git
3. https://github.com/heroku/heroku-buildpack-ruby.git

Deploying Code

With this, we have successfully configured our Heroku settings to deploy our code. Now finally, to deploy or code and enable auto-deploy features, let's go to the Deploy tab of our app settings. As we already attached our GitHub account and our Forem fork, we can now see two black buttons(Enable Automatic Deploys and Deploy Branch). Without making any changes, first press on Enable Automatic Deploys button and then press on the Deploy Branch button.

Things to keep in mind

The initial setup might take some time, so patiently wait for it to deploy. You will have access to your Production-ready Forem once it's done. In case you have any errors, please follow everything in order, and even then, if the error persists, you can comment below.

If you are using Heroku free tier, I would suggest you go and check your resources tab to confirm that the Free Dyno section has two active Dynos(web and sidekiq_worker). As sometimes in the Free tier, the sidekiq_worker is not turned on by default, so click on edit and turn it on. Once it is done, restart all dynos; you can find this in More settings of the app.

Also, remember when the first time you access your Forem, you might get an error saying, An unhandled lowlevel error occurred. The application logs may have details. in your browser. Don't worry about this; just reload. This is happening because of the Free version in Heroku.

I'll always help anyone who is willing to do their part, so feel free to contact me.