![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. 

![Ryan Carmody personal projects](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_3_e5dbc95e5b.png)

Most of the time, I am chipping away at a personal coding project. I love working on these as I get to complete a something from end to end, including the design, development, deployment and maintenance. These projects often need skills that I currently don't have, so I will spend a lot of time reading and learning so I can get the job done.

Here are the most recent personal projects I have worked on.

## Smug Chicken

![smug-strapi.png](https://ryancarmody-blog.s3.amazonaws.com/smug_strapi_674e27c016.png)

**Check it out at:** [smugchicken.com](https://smugchicken.com). **Stack:** Angular 15, RxJS, Node.js, MongoDB, Heroku, Firebase and Twitter API.

What happens when you blend AI and Wordle? Smug Chicken! 🐔
 
Smug Chicken is an image-based word game where players must guess the two words entered into an AI art generator to create the resulting grid of four images. 

I got the pleasure of working on this game with my long time friend, [Haydn Kenny](https://www.linkedin.com/in/haydn-kenny-media/). This was a refreshing change as I usually work on web development projects by myself. It was great to be able to workshop ideas and create the best possible product.

So I guess the question is now, are you a smug chicken today?

## WhereTaken

![My project-1 (2).png](https://ryancarmody-blog.s3.amazonaws.com/My_project_1_2_fb63c1599e.png)

**Check it out at:** [wheretaken.com](https://wheretaken.com). **Stack:** Angular 14, RxJS, Node.js, MongoDB, Heroku, Firebase and Twitter API.

I am a big fan of the daily games that became popular during COVID times, e.g. Wordle, Worldle, Flagle etc. I decided to build my own called WhereTaken. You have 6 chances to guess what country it is based on a single photograph. 

I used Angular 14 for the frontend with RxJS to create a completely reactive application. The game also keeps track of how many guesses people took to complete the game as well as their first guess. This information is passed to the Node.js backend and stored in a MongoDB database. That data is then used to show the global daily stats when users have completed the game.

I also have a Twitter Bot active for the [WhereTaken twitter account](https://twitter.com/wheretakengame), which is made using the Twitter API. It will automatically tweet yesterday's photo and answer, the stats from yesterday and will retweet a post related to WhereTaken.

The frontend Angular app is hosted on Firebase and the Node.js backend on Heroku. 

## Retro Snake

![Retro snake](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_03_06_pm_70bdc8e0c9.png)

**Check it out at:** [playretrosnake.com](https://playretrosnake.com). **Stack:** Angular 14, RxJS and Firebase.

I made this game while trying to improve my skills in creating reactive apps with Angular and RxJS. The game has a global state object which all components subscribe to. When a user presses the WASD keys, it will update the global state and change the direction on the next frame of the game. 

This game is hosted on Firebase.

## Odds Pony

![Play retro snake cover image](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_27_23_pm_2bda994a31.png)

**Check it out at:** [oddspony.com](https://playretrosnake.com). **Stack:** Angular 14, RxJS, NodeJS, MongoDB, reCAPTCHA, Firebase and Heroku.

I built this application when I wanted to work on a project that handled massive amounts of data. This application scans thousands of odds, which come from an API and gives users useful insights.

I have no interest in gambling/betting, but this was a great opportunity for me to work with an external API, process data and present it back in a meaningful way. Users can sign up for an API key from the data provider, and I make a percentage of those sales. It has created a nice monthly passive income for me. 

## Your budget summary

![Your budget summary cover image](https://ryancarmody-blog.s3.amazonaws.com/Screen_Shot_2022_10_23_at_1_34_16_pm_d8f192a321.png)

**Check it out at:** [yourbudgetsummary.com](https://yourbudgetsummary.com). **Stack:** Angular 13.

I made this project a couple of years ago. It is an application that will take in your income and expenses, and display your budget summary in a nice table at the bottom. 

When I built this, I had been working at RAA for a number of months and had started to gain some knowledge in Angular. I wanted to work on a project, end to end to reiterate some of the things I had learnt.




Most of the time, I am chipping away on some personal coding project. Check in here to see what I am currently working on!

/category/strapi

Latest articles

How to host your Strapi project on Heroku

My personal projects