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

npx create-strapi-app backend --template https://github.com/strapi/strapi-template-blog

2. Choose your installation type

3. Enter the database information

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?

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

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

In the configfolder, 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

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

2. Add Heroku Postgres Add-On

heroku addons:create heroku-postgresql:hobby-dev

3. Set Database variables automatically

npm install pg-connection-string --save

4. Create your Heroku database config file for production

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

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

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~

Frontend Web Developer | Looking for new opportunities

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store