Sign in

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.

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:

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

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.

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 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

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

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

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

heroku addons:create heroku-postgresql:hobby-dev

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

npm install pg-connection-string --save

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

Create a server.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)

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~

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