Made withStrapiTutorial

Deploy Strapi to production (Heroku)

S

Strapi

Creator on the Strapi channel

Watch on YouTube ↗

20K viewsMay 11, 202215:29 runtime

Learn how to successfully deploy a Strapi CMS to production on Heroku. This guide walks you through the entire process, from initial setup using the Heroku CLI to configuring a PostgreSQL database for your production environment. You'll learn how to manage environment variables…

Chapters

#strapi#tutorial#cmscrm

Pre-Deployment Setup

Heroku CLI: Ensure you have the Heroku CLI installed (brew install heroku/brew/heroku).
Login: Log in to your Heroku account using the CLI. If heroku login fails with an IP mismatch, use the interactive flag: heroku login -i.
Git Configuration:
- In your Strapi project, add package-lock.json to your .gitignore file to prevent potential deployment issues.
- Initialize a Git repository (git init), add all files (git add .), and create an initial commit (git commit -m "Initial commit").

Heroku App and Database Creation

Create a Heroku App: Run heroku create from your project's root directory. This command provisions a new application on Heroku and adds a heroku remote to your Git configuration.
Provision a PostgreSQL Database: Use the Heroku CLI to attach a free 'hobby-tier' database.
```
heroku addons:create heroku-postgresql:hobby-dev
```

Note
The database is automatically associated with the app you just created. The connection string is stored as a DATABASE_URL config variable in Heroku.

Production Configuration

Required Dependencies

Install the necessary packages for a PostgreSQL connection:

yarn add pg-connection-string
yarn add pg

Database Connection File

Create a production-specific database configuration to connect Strapi to your new Heroku database.

Create file: config/env/production/database.js

Add content: Use the pg-connection-string package to parse the DATABASE_URL environment variable provided by Heroku.

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

Heroku Environment Variables

Set the required environment variables (config vars) on Heroku for your app to run correctly.

Node Environment: Set the app to run in production mode. heroku config:set NODE_ENV=production
App Keys: Strapi requires unique application keys for security. Generate and set them. heroku config:set APP_KEYS=$(heroku run 'yarn strapi-generate' | grep -o 'APP_KEYS=.*' | cut -f2- -d=)
Heroku URL: Configure the server URL to use the app's public address. First, create config/env/production/server.js with module.exports = ({ env }) => ({ url: env('MY_HEROKU_URL') });, then set the variable: heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)

Deployment and Verification

Commit Changes: Add all your new configuration files and the updated yarn.lock to Git and commit them.
```
git add .
git commit -m "Add production DB config"
```
Deploy: Push your main branch to the heroku remote. This triggers a build and deployment process.
```
git push heroku head:main
```

Tip
Watch the build logs in your terminal. A successful deployment ends with a Verifying deploy... done message. You can also view logs in the Heroku Dashboard under your application's settings.

Post-Deployment Workflow

Important
A Strapi application in production mode behaves differently from development mode.

Content-Types are Locked: You cannot create or modify Content Types directly in the production admin panel. All schema changes must be made in your local development environment, committed to Git, and then pushed to Heroku to trigger a new deployment.
Data is Not Migrated: Your local data (e.g., SQLite content) is not transferred. You must either re-populate the content manually in the production admin UI or create a custom data migration script.
Roles & Permissions: Public roles and permissions are reset. You must re-configure them in the production admin panel (Settings > Roles > Public) to grant API access to unauthenticated users.

Introduction to Heroku Deployment

The first task at hand is to deploy our Strapi CMS to somewhere, and I did indicate that we're going to be deploying it to Heroku.

Now, if you go to the Strapi docs, then you will find an entire section on deployment where you have some general guidelines, you know, database versions, operating system versions, you know, some information about the configuration files. And then if you scroll to the bottom of this page, you will find all the hosting provider guides. So these are, you know, essentially going to take you to resources about deployment. So maybe you want to deploy to DigitalOcean or you want to deploy to Google App Engine, and you will find information here, including Heroku. So if you click that, these are the steps that we are going to be going through together. And of course, I'm on a Macintosh, so we're going to be going through these steps together to deploy Strapi to Heroku.

Now, there are a few prerequisites here, and I've already installed a few of them using Brew. So I installed the Heroku CLI, so I have that running and enabled on my machine, which is great. And I've also did a heroku login.

Okay. Now, you can press any key to open up the browser, so I'm just going to do that, and what this does, it opens the Heroku CLI login, which will allow you to log in. Sometimes, and this is I think a common bug, you may get IP address mismatch, and you don't need to worry. All you need to do is cancel this and just find Heroku—and let me just show you the aid to that right here—heroku login. And if you do it with a -i, then that is going to log you in using the command prompt. So that's my email address, and then I will enter my password as well.

Initial Project and Git Configuration

And now I'm logged in to Heroku. So that's one step done. Now, we've of course already created our Strapi project, so we don't need to recreate that again. The one thing that we need to do is open up this project in our code editor because we'll be using this to apply some changes. And the one and first change that they ask you to do in the Strapi docs is to come to the .gitignore file, go to the very end, and add package-lock.json because every now and then these could cause some problems when you're deploying to Heroku.

And then let's go back to my command prompt. And inside the project folder, I'm going to call git init and I'm going to call git add. And I'm going to add all the the repository and all the files to my repository and then do an initial commit. And now all the files that I've created, including the schemas and stuff, have now been committed. And I'm going to create a new Heroku project, and I'm going to use the Heroku CLI, which as I said, I installed using Brew. I'm going to type in heroku create, and this will create an app. So this is going to be essentially our app where we can go and check our Strapi instance. So this is secret-cliffs. And at this point in time, we can now set up PostgreSQL as well.

Setting up the PostgreSQL Database on Heroku

Now, how do we do that? Well, we're going to call heroku addons:create and we're going to specify heroku-postgresql:hobby-dev. hobby-dev is essentially, you know, a free database with very limited resources. So if you need to—there's a typo there. So if you need to have more resources, if you know, if you're doing this really in production and you want to get up and running with Strapi, you would need to probably go on a different tier in Heroku as opposed to hobby-dev. You can take a look at the packages, of course, those are going to be paid, but they do have lots of options available for you.

And notice that because I just created an app, this database is going to be automatically attached to that secret-cliffs application that I created, right? And as you can see, this is free.

Okay, we have a database empty. That's fine. And it created this database URL for us.

Okay, this is great. So now we can type in heroku config. And this is going to be our database URL, including the username and password and the location of this Postgres database. As you can see, it's on Amazon's Elastic computing, so that's the database URL that we need to use inside Strapi.

Configuring the Production Database Connection

So we need to then—let me just copy this. Let's just copy this because we'll need this later. So I'm just going to copy that and save it somewhere. And so now what I'll do is just say yarn add pg-connection-string. So pg-connection-string is a very useful package for basically using that Postgres database URL. This package will be able to parse that, and we can feed the right information into Strapi. So we're going to be using this pg-connection-string package to help our code when it comes to the database connectivity.

And then I'll go to my code editor. And what we need to do now is create a configuration file, a database configuration file for production. So I'm going to create a new subfolder in the config folder, and I'm going to call that env, and then another subfolder in there, which is going to be called production, like so. Okay, so now we have /config/env/production, and I'm going to create a database.js file in that location. Again, config/env/production/database.js.

And then I'm going to be copying some code over, which will look like this. And notice I use that pg-connection-string, which we've just installed. We're going to parse the database URL, which we can access from process.env because this database URL will be available for us once we deploy everything to Postgres. And then here are the connection details. So what this will do is it will allow us to connect to that Postgres database.

Setting Production Environment Variables

And then we also need to set the Node environment for Heroku. So I'm going to type in heroku config:set NODE_ENV=production. So we set our Node.js environment to production.

Okay, then we're going to go back to my editor, and then I'm going to create a new file on the production folder. I'm going to call that server.js. And I'm going to export the Heroku URL, and we need to now set this MY_HEROKU_URL environment variable on our own. But we can do that with a very easy one-liner statement, which I'm going to copy and add here. So we're going to say heroku config:set MY_HEROKU_URL... to the value of recalling heroku info -s, grabbing the web URL, and just grabbing the right bits and pieces from it. And there you go. So now we have MY_HEROKU_URL set to the right Heroku URL. This will be picked up, although this was done, you know, automatically for us, which is great.

So now, again, in this project folder, we need to install one more package, which is going to be yarn add pg, which is the appropriate Postgres package. And we will also need to configure the app keys. Okay, we're going to be calling that using the heroku config:set CLI command. And this is how the command would look like. So we're setting these app keys, which are going to be required by Strapi, and we assign that to the application that we have created. Okay, so we set these application keys, which is awesome.

Finalizing Commits and Pushing to Heroku

And I think the last step that we need to do now is going to be to commit these changes, install the potentially missing packages for your yarn.lock file, and then we are ready to deploy. Type in git add ., git commit -m "updated db config". Okay, that's done. Let's do a yarn install. Okay, everything is up to date.

Now I'm going to add yarn.lock, git commit -m "updated yarn lock file". Hopefully that's okay, that's already in there. And now we're going to say git push heroku head:main. So let's see if this is going to work now.

All right. So basically, Heroku is going to take our GitHub repository, see all those files in it, start up everything, do the installation, and then in about a couple of minutes, we should be able to go to our projects that is running on Heroku. So let's wait for these commands to finish running.

Verifying the Production Deployment

All right, so our installation is now complete, which means that if I just scroll a little bit up, you see familiar messages in here: Strapi build, Webpack compiled successfully, Admin UI built successfully. And then the last message should be, "Verifying deploy." And if you see this, then this pretty much means that the deployment has been completed.

Now, what you can do, you can go to your Heroku account and go to the dashboard. And you see I have a few instances running in here. There's one called secret-cliffs, so that's our deployment. And you can come here and take a look at, you know, if you click here more, view the logs. So you can take a look at potentially the logs here. You can also go back and take a look at the resources, and you see that there is an attached database, which is for free, which is attached to our container here on Heroku.

So I'm just going to press on Open App and see what happens. And what we have is a Strapi instance running successfully. Okay. Also notice we no longer have "development" here, it is now in "production". So this is a production version. So how does Strapi differentiate between production and development? Remember, we set the Node environment to be production, and Strapi is looking for that environment variable essentially. So now if I go to /admin and I can set up my super administrator here, and press Let's Start. All right, so this is now the production version of our Strapi instance.

Production Environment Limitations & Next Steps

You will notice that we have the content types. If I go to the Content-Type Builder, we have Film, Review, and User. We do have the Avatar, and we have everything in place except for the data. So data does not get ported automatically from development to production. So you could either potentially create a script that does this. There are various strategies that you can find, but what I'll do, I'm just going to type in all the information again. But as I said, maybe as a homework, you could write a script that takes, you know, an object from JSON and then using, you know, various fetch API calls, you just populate the Strapi instance programmatically. So you can do that as well. What I'll do, I'm just going to create these entries now.

The one thing that you will also notice before I actually do that, we have this message, I don't know if you saw that, but you know, you can pause the video. So if I just refresh this page, it's going to appear as a pop-up right here that says, "The auto-reload feature is required to use this plugin. Start your server with strapi develop." And you also don't see a way to modify your content types. So because you're running in production mode, your content types cannot be changed. What you need to do, you need to go back to your development environment, you need to make the changes there, you need to commit those changes, and then push those changes to Git, which will then automatically push those changes to Heroku. It will update, and then your production system will also update. So I'm going to populate the data, but we are ready with our Heroku deployment. This is now running in a production setting.

Now, once I set the data, we'd also need to come here and check, you know, the roles and the providers and all that information that we that we had. I'm sorry, just Roles, and then Public, and make sure that these are also checked accordingly to replicate exactly the setup that we had on the development environment. So remember, films, reviews, and the slugify plugin, you will need to make those changes there. Okay, I'm going to populate the data, make those changes, and then in the next video, we'll take a look at how to deploy our Next.js application to Vercel.