Deploying a Strapi project on Heroku

#strapi #heroku #tutorial #beginners

Prerequisites:

Have an account with Heroku
Have a Strapi project, which uses a Postgres database, in a git repository

Strapi runs on a Node server and has a database (I chose Postgres). This tutorial focuses on Strapi in particular, but this really could apply to any other Node + Postgres project.

I don't know about you, but as I get further along in my career as a developer I am finding that there are more and more things that I want/need to know. For me, I have a massive blind spot when it comes to deploying anything. It makes me terribly impatient and I hate it.

I used to absolutely despise cooking, so one summer I decided that I was going to get good at it. My theory was that maybe if I was good at it, I wouldn't hate it so much. That theory turned out to be absolutely true, and not only do I love cooking now, but I also combined that love with coding and have my own recipe site! (It's called Hayley's Health Foods, if you're interested). Anyway, a couple of months ago I decided that maybe it was time to take the same approach with deployment. Maybe if it wasn't so hard, it wouldn't be such a chore. So here we are, one of the best ways to learn how to do something is to teach someone else, so welcome to this tutorial of how to deploy a Strapi application on Heroku, with the Heroku Postgres add-on.

Step 1: Create a strapi project

Hopefully you have already done this. Otherwise either:

hop over to https://hayley.codes/blog/using-strapi-to-create-a-blog to learn about Strapi, or
use yarn create strapi-app my-project (and selecting Postgres as the database type for this tutorial).

Step 2: Configure the production database settings

In config > environments > production > database.json set the client, host, port, database, username and password settings.

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
      },
      "options": {}
    }
  }
}

If these process.env.variable lines are new to you, what we are doing is accessing environment variables that we will set in Heroku. This is a way to avoid posting sensitive credentials directly in git where everyone can see it. Even if your repository is private, it's definitely not good practice to commit credentials.

Step 3: Set up Heroku

If you haven't already done so, head over to https://signup.heroku.com/ to make a free account.

Download and install the Heroku CLI for your operating system. I'm using Homebrew:

brew tap heroku/brew && brew install heroku

Or go to Heroku for instructions specific to your OS.

Once you've got an account and have the CLI installed, use the following command to log in:

heroku login

Create a new project on Heroku:

heroku create your-project-name

Add the Heroku Postgres add-on:

heroku addons:create heroku-postgresql:hobby-dev

The addon comes with a free tier which includes up to 10,000 rows in the database, perfect if you're setting up something small.

The add-on automatically exposes the database credentials into a single environment variable accessible by your app. View them using the following:

heroku config

This will produce a long string for all of the variables, which can be read like so:

postgres:// USERNAME : PASSWORD @ HOST : PORT / DATABASE_NAME

Use these variables to set each of the following environment variables for your strapi project:

DATABASE_USERNAME
DATABASE_PASSWORD
DATABASE_HOST
DATABASE_PORT
DATABASE_NAME

Using the following command for each:

heroku config:set VARIABLE_NAME=variable_value

e.g.

heroku config:set DATABASE_PORT=5432

If you did not originally install Strapi with PostgresSQL you will need to install the pg module now:

npm install pg

Deploy🤞

Deploy the project:

git push heroku master

Once it has completed deployment you can open your project using

heroku open

You did it! 🎉

...hopefully.

Troubleshooting

One of the reasons I hate deploying stuff is it never seems to work first time. So if you've followed this tutorial and something didn't work out right, there a couple things to do first:

Confirm you can run the app locally. If it doesn't work locally, there's no way it's going to work on production.
Check you have correctly set all the environment variables in heroku. You can do this by going to https://dashboard.heroku.com/, clicking your app, then head to Settings where you will find a button labelled "Reveal Config Vars" - make sure they match what you can see in the terminal (recall heroku config).
Read the logs. You can see the most recent logs using heroku logs --tail There's a lot of junk in there, but more often than not there is a single line with an error message you can Google.
Google it.
Ask the community. Stack Overflow and Twitter are the places to be for us developers 😊