![Heroku hosting platform logo](https://ryancarmody-blog.s3.amazonaws.com/heroku_d426f909c6.png)

<WatchOnYouTube text="Watch this tutorial on YouTube" link="https://www.youtube.com/watch?v=zoIR-d-QxaA" />

## Table of contents
- [Prerequisites](#prerequisites)
- [Step 1: Create a Strapi project](#step-1-create-a-strapi-project)
- [Step 2: Install the required PostgreSQL packages](#step-2-install-the-required-postgresql-packages)
- [Step 3: Add a database.js file](#step-3-add-a-databasejs-file)
- [Step 4: Push your project to GitHub](#step-4-push-your-project-to-github)
- [Step 5: Create a new Heroku app](#step-5-create-a-new-heroku-app)
- [Step 6: Connect your GitHub repo to Heroku](#step-6-connect-your-github-repo-to-heroku)
- [Step 7: Add Heroku Postgres add-on as the database](#step-7-add-heroku-postgres-add-on-as-the-database)
- [Step 8: Add required environment variables to Heroku](#step-8-add-required-environment-variables-to-heroku)



## Prerequisites

To get started, you'll need the following:
- [Strapi](https://strapi.io/) project
- [Node](https://nodejs.org/en/) installed (I have v16.14.2)
- [Git](https://git-scm.com/) installed
- [GitHub](https://github.com/) account
- [Heroku](https://heroku.com/) account


## Step 1: Create a Strapi project

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=44s" />

I am assuming that you have already created your Strapi project. If you have not, you can run the following in your terminal:

```
npx create-strapi-app@latest my-project
```

If you are brand new to Strapi and want to set up a project, you can check out my video where [I create a blog with Next.js, Strapi and GraphQL.](https://www.youtube.com/watch?v=jF4_yiO3HVc&ab_channel=CodewithRyan). The Strapi setup is in the first half of the video.

## Step 2: Install the required PostgreSQL packages

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=78s" />

We will be connecting our hosted Strapi project to a PostgreSQL database. We need to install some PostgreSQL packages to our Strapi project to make this possible. Open a terminal and navigate to your Strapi project, then run the following commands

```
npm install pg-connection-string --save
npm install pg --save
```

OR if you are using yarn

```
yarn add pg-connection-string
yarn add pg
```

## Step 3: Add a database.js file

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=121s" />

In your Strapi project, you have a `config` folder. Inside of this folder, create a new folder called `env`, and inside of that, create a new folder called `production`. Inside this folder, create a new file called `database.js` and add the following code

```js:config/env/production/database.js
const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);
module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});
```

This code will enable us to connect to the database we create in Step 6.

## Step 4: Push your project to GitHub

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=173s" />

You will need to push your Strapi project to GitHub using Git. If you are reading this tutorial, and are at the point in your career where you are creating content management systems, I am assuming that you already know how to do this. 
If not, [this article](https://www.digitalocean.com/community/tutorials/how-to-push-an-existing-project-to-github) explains it well. Once your project is on GitHub, move on to the next step. 

## Step 5: Create a new Heroku app

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=265s" />

Log in to your Heroku account. On the dashboard, click `new`, and then `create new app`.

![Screen Shot 2022-08-17 at 10.16.44 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_17_at_10_16_44_am_ecd1f9e1ce.png)

Then, give your project a name, select your region, and click `Create app`.

![Screen Shot 2022-08-17 at 10.18.46 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_17_at_10_18_46_am_3ff7924667.png)

## Step 6: Connect your GitHub repo to Heroku

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=294s" />

We are going to connect the repository we created to Heroku. We will set it up where your project will automatically deploy when we push new changes to our main branch.

Under the `Deploy` tab, click on `GitHub` and then `Search`. You should be presented with a list of your public repositories. If you have never connected GitHub to Heroku, first click `Connect to GitHub` and then you will be given the option to `Search`.

![Screen Shot 2022-08-18 at 11.31.05 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_11_31_05_am_57b8fabc2f.png)

Select your branch and click `Connect`. This will connect your GitHub repo. The last thing we need to do is enable automatic deploys. To do this, click `Enable Automatic Deploys` under the `Automatic deploys` section.

![Screen Shot 2022-08-18 at 11.35.42 am.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_11_35_42_am_e2303cc79f.png)

Don't click on `Deploy Branch` just yet. After step 7, we will return to this page and run a manual deploy.

## Step 7: Add Heroku Postgres add-on as the database

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=346s" />

As mentioned above, we are going to be connecting our Strapi project to a PostgreSQL database. Heroku has an add-on called `Heroku Postgres` we will use.

To add this add-on, click `Overview` and then `Configure Add-ons` or simply click on the `Resources` tab.

![Screen Shot 2022-08-18 at 4.18.53 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_18_53_pm_6a594ca11f.png)

Search for `Heroku Postgres` and click on it. You should see a pop-up. Here we can choose the plan we want and add it to our application. For this example, I will add the `Hobby Dev - Free` plan. Once you have chosen that click `Submit Order Form`.

Now go back to the `Deploy` tab, under `Manual Deploy`, click on `Deploy Branch`. This is the only manual deployment we will have to do as it will automatically deploy when we push/merge new changes to our main branch on GitHub.

## Step 8: Add required environment variables to Heroku

<WatchOnYouTube link="https://www.youtube.com/watch?v=zoIR-d-QxaA&t=452s" />

There is just one more thing we need to do before we are done, and that is to add the required environment variables. If we navigate back to the code for the Strapi project, and go to the `.env` file, you'll notice that there are 4 additional environment variables other than `HOST` and `PORT`. They are `APP_KEYS`, `API_TOKEN_SALT`, `ADMIN_JWT_SECRET` and `JWT_SECRET`. These are used throughout our project.

![Screen Shot 2022-08-18 at 4.40.37 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_40_37_pm_76797a535b.png)

We need to set these environment variables in Heroku. Go back to Heroku and click on `Settings` and scroll down to `Config Vars`. 

![Screen Shot 2022-08-18 at 4.45.41 pm 1.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_45_41_pm_1_edc949c70e.png)

Click on `Reveal Config Vars`. As you'll notice we only have one config var set, which is our `DATABASE_URL`. We need to add `APP_KEYS`, `API_TOKEN_SALT`, `ADMIN_JWT_SECRET` and `JWT_SECRET` here. 

![Screen Shot 2022-08-18 at 4.47.07 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_47_07_pm_21784fde81.png)

We are going to add base64 strings of length 32 for these values. You can go to [generate.plus](https://generate.plus/en/base64) to help you generate these. While we are here, we will also set `NODE_ENV` to `production` and `MY_HEROKU_URL` to `<your app name>.herokuapp.com/`. If you have forgotten your Heroku app name, scroll to the top of the page and click `Open app`, which will take you to your Heroku URL, which contains your app name. If you do this, it will likely show an application error, you can ignore this for now.

After you have added in all of the environment variables, it should look something like this

![Screen Shot 2022-08-18 at 4.52.33 pm.png](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_08_18_at_4_52_33_pm_d39552b463.png)

And that is it! Your Strapi project is now deployed to Heroku. You can scroll to the top of the page and click on `Open app` to open your application. You can then navigate to `<your app name>.herokuapp.com/admin` and create a new super user and get started using your deployed Strapi project.

If you liked this tutorial, you may like the YouTube video I made where [I created a blog with Next.js, Strapi and GraphQL.](https://www.youtube.com/watch?v=jF4_yiO3HVc&ab_channel=CodewithRyan). Check it out!

In this post, I will show you how to host your Strapi project on Heroku. There is also a YouTube tutorial available. 

/category/heroku

Latest articles

How to host your Strapi project on Heroku