Forem Creators and Builders

Cover image for Production: Forem on Heroku
Akhil Naidu
Akhil Naidu

Posted on • Updated on

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

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.

Discussion (10)

Collapse
ce7in profile image
Muhammed Cetin • Edited

Finally, it is done. I've a forem instance on Heroku. You're amazing. Now, I'll install a development instance locally, then I'll code on Rails to add new features to it. Thank you so much.

I've applied same methods to deploy it but I've had some additional environment variables like AWS and Fastly Api Keys. I'll try to add all of my environment variables step by step to examine which one causes the error. If I could find the problematic variables, I'll share them on my comment here.

Collapse
akhil profile image
Akhil Naidu Author

I'll always try to update my fork in according to Dokku and Heroku friendly, in case if you face any errors in the Official repository, test with my repo too before coming to some error analysis conclusion.

Collapse
galabre2 profile image
Jay

I followed your instruction to the letter; I managed to deploy FORM on my Heroku; I get the welcome page inviting me to create admin account; I fill in the form but it returns me to "This page does not exist 404" when I submit.
Any thoughts?

Collapse
galabre2 profile image
Jay

This is what is see in the logs
2021-06-22T14:44:01.190903+00:00 app[web.1]: F, [2021-06-22T14:44:01.190812 #34] FATAL -- : [0875b055-f028-40c5-afbf-276ee44a0748]

2021-06-22T14:44:01.190924+00:00 app[web.1]: [0875b055-f028-40c5-afbf-276ee44a0748] Pundit::NotAuthorizedError (not allowed to create? this ActionController::Parameters):
2021-06-22T14:44:01.190924+00:00 app[web.1]: [0875b055-f028-40c5-afbf-276ee44a0748]

2021-06-22T14:44:01.191004+00:00 app[web.1]: [0875b055-f028-40c5-afbf-276ee44a0748] app/controllers/registrations_controller.rb:15:in create'
2021-06-22T14:44:01.192240+00:00 app[web.1]: [0875b055-f028-40c5-afbf-276ee44a0748] app/lib/middlewares/set_cookie_domain.rb:12:in
call'
2021-06-22T14:44:36.499697+00:00 app[web.1]: 2021-06-22 14:44:36.499 UTC [26] LOG stats: 0 xacts/s, 0 queries/s, in 3 B/s, out 5 B/s, xact 2627 us, query 2627 us, wait 11 us

Collapse
akhil profile image
Akhil Naidu Author

As I said, configuring every mentioned env is important.

The issue might be you haven't configured S3 ENV variables.

Collapse
galabre2 profile image
Jay

Ha I see... But your instruction you mention only a few variables; would be worth adding the missing ones to make sure newbees are kick-started.
What do you think?
I will investigate the S3 ENV, where it is, how to set it up.
Greeting from Belgium.

Collapse
galabre2 profile image
Jay

During deployment on Heroku I get a lot of warning msg similar to these; what is the best way to get them solved?

warning "@storybook/addon-notes > @storybook/components@5.3.21" has unmet peer dependency "react-dom@".
warning "@storybook/addon-notes > @storybook/router@5.3.21" has unmet peer dependency "react@
".
warning "@storybook/addon-notes > @storybook/router@5.3.21" has unmet peer dependency "react-dom@".
warning "@storybook/addon-notes > @storybook/theming@5.3.21" has unmet peer dependency "react@
".

Collapse
akhil profile image
Akhil Naidu Author

Don't worry much, it is an usual error.

In fact not an error, just a consol log. It is quite normal.

Collapse
damon3465 profile image
damon3465 • Edited

i deploy to heroku. the log error message is below and image. help pls.

forem.dev/remoteimages/uploads/art...

2021-07-03T08:39:48.040961+00:00 app[web.1]: F, [2021-07-03T08:39:48.040841 #35] FATAL -- : [47fdeb38-df66-4584-8918-ed2bfeb2b57d]

2021-07-03T08:39:48.040973+00:00 app[web.1]: [47fdeb38-df66-4584-8918-ed2bfeb2b57d] ActiveRecord::StatementInvalid (PG::DuplicatePstatement: ERROR: prepared statement "a6" already exists

Collapse
galabre2 profile image
Jay

Great guide. Thank you for this!