Deploying Strapi app on Heroku

Balaji Boominathan
techzap
Published in
4 min readMay 26, 2020

This article guides you to set up the Strapi on Heroku with the PostgreSQL Database.

Source: https://strapi.io/

What is Strapi?

Strapi is an open-source, Node. js based, headless CMS to manage content and make it available through a fully customizable API. It is designed to build practical, production-ready Node. js APIs in hours instead of weeks.

Strapi is easy to customize and deploy the application. It supports both REST and GraphQL API. The application is entirely written on Javascript. It supports integration with various platforms like SendGrid, Algolia, Cloudinary, etc.

Interesting Fact: Recently Strapi has raised $10 million in Series A funding.

What is Heroku?

Heroku is a cloud application platform that provides Platform as a Service(PaaS). It supports various services like GitHub Integration, Continuous Delivery, and supports plenty of Add-ons. Heroku is easy to use and we can deploy the applications easily.

Heroku Setup

If you don’t have an account in Heroku, Go ahead and create one.

Then go to the Heroku dashboard and create a new app. You need to give the unique and choose a region.

Heroku app creation

After creating the application, go to the Resources tab and you’ll find the Add-ons section. In that type Postgres, you’ll get the Heroku Postgres in suggestion. Click on that.

The pop-up will appear, click Provision.

Postgress add-on

Now the Postgres add-on is installed in your application.

Head over to the Settings tab and find the Config vars section, click on the Reveal Config Vars button. You’ll see the Database URL. Copy that to clipboard.

The URL will look like postgres://DATABASE_USERNAME:DATABASE_PASSWORD@DATABASE_HOST:DATABASE_PORT/DATABASE_NAME

Set up the Config Vars to their appropriate value. Finally the Config Vars will look like this.

DB configs

Heroku CLI gives you an option to create and manage your Heroku apps from your Terminal. Install the Heroku CLI follow the instructions w.r.t your operating system.

$heroku login

This command is used to configure the Heroku CLI with your account.

Strapi Setup

We can install the Strapi through yarn or npm. You must have yarn or npm/npx installed.

To Create a strapi project using yarn. Execute this command.

$yarn create strapi-app your-project-name --quickstart

If you want to use npx. Execute this command

$npx create-strapi-app your-project-name --quickstart
Strapi project installation

Now move to the project directory and open the databse.json file in the config/environments/production.

In the databse.json file change the client to “postgres”.

database.json file

Then you need to install the Postgres package by this command

$npm install pg --save

Git Flow

Now inside your project directory Execute this git init command. This will make your project a Git project.

$git init

Now update the .gitignore file with package-lock.json andyarn.lock

Now to connect to the app we created in the Heroku. We need to execute this command. Replace the name with your Heroku app name which you created initially.

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

Now add the files to the staging area in Git.

$git add .

Now Commit your changes

$git commit -m "Initial commit"

Deploy to Heroku

This is where magic happens

$ git push heroku master
Heroku Deploy

It starts deploying your project to the Heroku. After Deployed you’ll get an URL of the application. Open that or You can open the application from your Heroku Dashboard. If you open the URL you’ll see this

Landing page

If you see this, Congrats!!! Your app is successfully deployed. You can now move to the admin dashboard by adding the /admin at the end of your app URL.

Eg: <your-app-name>.herokuapp.com/admin

You’ll see the admin Signup page. Something similar to the image below. Enter the credentials and Signup.

Strapi Admin Signup

After the Signup you’ll see the Strapi Admin Dashboard.

Congrats! You’ve successfully deployed the Strapi application on Heroku. I hope this article has helped you in some way. If you face any issues, feel free to comment. Thank you :)

--

--