Strapi and Heroku setup

In this article we will set up Strapi and host it on Heroku. Using these tools we can quickly create projects with very little dev ops knowledge, perfect for hobbiest developers!

By the end of this article we should have been able to:

• Install Strapi Locally
• Push your Strapi codebase to a git repository (I will use GitHub here)
• Connect your Heroku account to your Github(the project repository)
• Enable Automatic Deployments
• Connect your Strapi project to Postgres add-on database provided by Heroku.

Before we start...

What is Strapi

Strapi is an open-source, Node.js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Strapi also enables content editors to streamline content delivery (text, images, video, etc) across any devices.

What is Heroku

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. It supports several languages such as Java, Nodejs, Go, PHP, Python.

What you will need

• Github Account
• Heroku Account
• Git Installed on your machine
• Nodejs v14+ installed

All of the above are free

Installing Strapi locally

npx create-strapi-app my-project --quickstart

The above command will create a Strapi project called "my-project" in the directory you are in. The quickstart option will automatically start the server once it has finished installing. Once the install has completed and the local server has started you would be able to access the cms using this link http://localhost:1337/admin.

Using the link for the first time will take you to create a super user. This will allow us to create content schemas locally that we can then deploy to Heroku. We will not be able to create content types on Heroku as it runs in production mode. Read more here

Pushing to your GitHub

Create a repository on GitHub and then push your Strapi code to GitHub.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/USERNAME/NAMEOFREPOSITORY.git
git push -u origin main

Connect to Heroku

We will now link our Strapi code from GitHub to Heroku and set up automatic deploys.

• Log into your GitHub account and keep the tab open.
• Log into your Heroku account
• Create a new app
• Choose GitHub as your deployment method
• Find your repository for your Strapi CMS
• Enable automatic deploys option

After a short while Heroku will deploy your Strapi code from GitHub.

Using PostgreSQL on Heroku

Heroku does not fully support SQLite (Strapi default). Whenever Heroku does a dyno cycle it will complety wipe your database. To get around this we will be using Heroku PostgreSQL addon. Follow through the screen prompts to complete the add on install.

Once the add-on is installed on Heroku we will need to update our codebase:

• Install pg-connection: yarn add pg-connection-string (helper functions to connect to PostgreSQL)
• Install PostgreSQL client: yarn add pg
• Create a new directory in the config folder: config\env\production
• Create a new file in the new production director: production\database.js
• Add the below into the file:

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,
      },
    });

Add, commit and push your changes. Heroku will then start deplying your changes. Once it is finished you should be able to access your Strapi CMS with the link provided by Heroku (Remember to add /admin at the end)

How does our code know to use the Heroku PostgreSQL database?

After installing Heroku PostgreSQL add-on we can go to Settings > Config vars > Reveal Config Vars. This shows us a production environmental variables. The step previously (config\env\production\database.js) tells our Strapi app to use these vars from Heroku (Heroku is running our app in production mode).

UPDATE as of strapi 4.0.6

The session middleware requires some keys to secure the cookies and encrypt data, for more information on how this works please see koa-session. In order to properly configure the middleware you will need to add these key settings to your server.js config file:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array("APP_KEYS", ["testKey1", "testKey2"]),
  },
  // ...
});

This must also be added into Heroku's config vars

Resources:

• Heroku and SQLite: Read more here
• Strapi
• Heroku
• Github