Deploying a Strapi project on Heroku
Tags: strapi, heroku, tutorial, beginners
Published: 2020-05-22 09:53:59

Prerequisites:

- Have an account with [Heroku](https://www.heroku.com/home)
- 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](https://www.hayleyshealthfoods.com/?utm_source=dev-to&utm_medium=blog&utm_campaign=deploying-strapi-on-heroku), 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](https://hayley.codes/blog/using-strapi-to-create-a-blog?utm_source=dev-to&utm_medium=blog&utm_campaign=deploying-strapi-on-heroku) 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.

```json
{
  "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/](https://signup.heroku.com/) to make a free account.

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

```bash
brew tap heroku/brew && brew install heroku
```

Or go to [Heroku](https://devcenter.heroku.com/articles/heroku-cli#download-and-install) for instructions specific to your OS.

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

```bash
heroku login
```

Create a new project on Heroku:

```bash
heroku create your-project-name
```

Add the Heroku Postgres [add-on](https://elements.heroku.com/addons/heroku-postgresql):

```bash
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:

```bash
heroku config
```

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

```bash
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:

```bash
heroku config:set VARIABLE_NAME=variable_value
```

e.g.

```bash
heroku config:set DATABASE_PORT=5432
```

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

```bash
npm install pg
```

## Deploy🤞

Deploy the project:

```bash
git push heroku master
```

Once it has completed deployment you can open your project using

```bash
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:

1. Confirm you can run the app locally. If it doesn't work locally, there's no way it's going to work on production.
2. Check you have correctly set all the environment variables in heroku. You can do this by going to [https://dashboard.heroku.com/](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`).
3. 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.
4. Google it.
5. Ask the community. Stack Overflow and Twitter are the places to be for us developers 😊