Deploying Strapi to Heroku Step-by-Step Tutorial

This article will teach you how to deploy Strapi to Heroku with Postgres as the database client in detail.

As a popular headless CMS, Strapi is a great backend choice for creating web apps such as a blog website. It’s better to host it online once you figured out how it works. Now let’s see how are we gonna achieve that.

1. To begin with, create a Strapi app

You need to have the Strapi code ready on your local machine. It’s always easier to start with a template. You can look it up in the official repo of Strapi here: https://github.com/strapi. Let’s say I want to build a blog site. I can simply run this command below:

# Using npx
npx create-strapi-app my-project --template blog
# Using yarn
yarn create strapi-app my-project --template blog

2. Choose your installation type

Strapi will ask you to Choose your installation type, and you should choose Custom (manual settings) here. The reason is that the default database client SQLite isn’t supported by Heroku.

3. Enter the database information

During this article, we will use PostgreSQL as our database client. No matter which one you choose, make sure you have created a user and a database locally before moving forward.

After selecting the database client, you need to enter information including your database name, user name, and password. Once you are done, your application should be ready to go and will automatically open in http://127.0.0.1/

Strapi doesn’t support database migration in deployment, so whatever changes you make here won’t be kept after deploying. You will also need to sign up for a new user again.

What if I have already chosen the default database?

No worries. It is possible to switch database clients in Strapi. To start with, simply install “node-postgres” by running this command

npm install pg

Then, replace the /config/database.js with:

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: env('DATABASE_HOST', 'localhost'),
        port: env.int('DATABASE_PORT', 5432),
        database: env('DATABASE_NAME', your_database_name),
        username: env('DATABASE_USERNAME', your_username),
        password: env('DATABASE_PASSWORD', your_password),
        schema: 'public',
      },
      options: {},
    },
  },
});

And now you should be ready to go~

Add the AWS S3 upload provider

Strapi doesn’t save images permanently after deployment, so don’t panic if you find all your images in Strapi expire in a short while. It’s essential to add an upload provider to store them and AWS S3 would be a great choice.

Before moving forward, make sure you have created an S3 bucket in your AWS account and note down the credentials.

In the config folder create a new file called plugins.js and add the following code:

module.exports = ({ env }) => ({
    upload: {
        provider: 'aws-s3',
        providerOptions: {
            accessKeyId: env('AWS_ACCESS_KEY_ID'),
            secretAccessKey: env('AWS_ACCESS_SECRET'),
            region: 'your-bucket-region',
            params: {
                Bucket: 'your-bucket-name',
            },
        },
    },
});

DON’T forget to add those configuration variables in your Heroku project later! You can find the Config Vars in the Settings.

Config Vars in Heroku Project Settings

Prepare for Heroku Deployment

1. Connect with Heroku

For the next step, it’s suggested that you create a Heroku project first. Initializing the git repository in your local code and connecting it with your Heroku app by running the commands below:

git init
heroku git:remote -a your-heroku-app-name

2. Add Heroku Postgres Add-On

Install the Postgres add-on for Heroku, which provides a free “Hobby Dev” plan.

heroku addons:create heroku-postgresql:hobby-dev

3. Set Database variables automatically

Install the pg-connection-string package, which helps Strapi deconstruct the environment variables.

npm install pg-connection-string --save

4. Create your Heroku database config file for production

Create a new database.js in this path: /config/env/production with the code below

const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: config.host,
        port: config.port,
        database: config.database,
        username: config.user,
        password: config.password,
        ssl: {
          rejectUnauthorized: false
        }
      },
      options: {
        ssl: true,
      },
    },
  },
});

Besides, set the NODE_ENV variable on Heroku to production to ensure this new database configuration file is used.

heroku config:set NODE_ENV=production

5. Create your Strapi server config for production

Create a file nameserver.js in this path /config/env/production. In this file, you need the url to notify Strapi what your public Heroku domain is. The code should look like this:

module.exports = ({ env }) => ({
  url: env('HEROKU_URL'),
});

Remember to set the environment variable in Heroku for the HEROKU_URL

heroku config:set HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)

6. Last step! Commit your changes and deploy

As always, commit your changes and push them to Heroku.

git add .
git commit -m "Initial Commit"
git push heroku master

It’s gonna take a while and then you should be able to see your Strapi code online and ready for your use.

CONGRATS on making it to the final step!

I hope you find this article useful. Feel free to leave me a comment and let me know your thoughts~