Strapi v4 deployment to Heroku not working

Questions and Answers
1
System Information
  • Strapi Version: 4.0.4
  • Operating System: Mac OS / Heroku
  • Database: Postgres 14
  • Node Version: 14.13.1
  • NPM Version: 8.3.0
  • Yarn Version: 1.22

For learning purposes I am trying to deploy a strapi 4 app (the deliveroo clone project actually) to Heroku. However, this does not work. And it seems there are no updated guides. Currently I follow these guides:

Does anybody know, what changed between strapi v3 and v4 with regard to heroku deployment?

I still create a confi/env/production/ folder with a database.js and a server.js file. The database file looks like this:

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

and the server.js file lie this:

module.exports = ({ env }) => ({
  url: env('https://strapi-deliveroo-clone.herokuapp.com'),
});

The welcome page works, but as soon as I hit the /admin page, an API error occurs.
Has anybody of you been successful?

2

ooookay, I can anyswer that myself. I wanted to be extra smart and used

module.exports = ({ env }) => ({
  url: env('https://strapi-deliveroo-clone.herokuapp.com/'),
});

instead of

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

The quotation marks made me believe I have to replace the Heroku variable…

3

Hey, so I should leave the line as

url: env('MY_HEROKU_URL'),

right? Or should I replace it with the actual app url on heroku?

4

Exactly leave it like it is. And in your Heroku settings you create a variable called “MY_HEROKU_URL” and set it to your heroku url.

1 Like
5

Hi @rowild,
im following what you did, and im also trying to deploy strapi v4 with heroku postgress db to heroku, but i always get “Application error” and at=error code=H10 desc="App crashed" method=GET

do you have time to help me?

6

I don’t know what those errors mean. A quick google search brought up this:

Does this help?

7

H10 is just generic App crash error. When i run heroku with NODE_ENV=development flag, it runs fine. but when i go with NODE_ENV=production to run in production with postgres database, it wont start.
so thats why im asking how did you make it running?

care to share full server.js and database.js setup in your config/env/production folder?

8

In your Heroku config, add the APP_KEYS, JWT_SECRET, and API_TOKENS. Adding APP_KEYS alone did the trick for me.
.
This might help Heroku Deployment - #2 by Frilansutvecklaren

9

I added all this, i will try with mysql database now and see

10

If you’re on Heroku, I suggest that you use the Postgre addon.
There’s also a one-click deploy element offered by Heroku to set you up quickly strapi/strapi-heroku-template - Buttons - Heroku Elements

The only problem is that when I try to git clone the deployed project, it creates an empty directory. Maybe you can have a solution to that.

11

@WardenCommander This is my config/env/production/database.js:

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

and this is the config/env/production/server.js

module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
  emitErrors: true,
  app: {
    keys: env.array("APP_KEYS", ["testKey1", "testKey2"]),
  },
});

And just to make things complete, here is my config/env/production/plugins.js:

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: 'cloudinary',
      providerOptions: {
        cloud_name: env('CLOUDINARY_NAME'),
        api_key: env('CLOUDINARY_KEY'),
        api_secret: env('CLOUDINARY_SECRET'),
      },
      actionOptions: {
        upload: {},
        delete: {},
      },

      // Image breakpoints (independent from any upload provider)
      breakpoints: {
        xlarge: 1920,
        large: 1000,
        medium: 750,
        small: 500,
        xsmall: 64
      },
    },
    // logger: console // Only if you want to `stdout` logs
  },
});

All on a strapi v4.1.0.

12

Managed to solve it. My problem was that collection type names were to long. For sqlite max length is 128bytes, and for postgres and mysql is 64bytes

EDIT: for anyone looking for heroku alternative (cheaper) and no limit on database, also it supports proxy over cloudflare (orange cloudflare settings)

deploy it on here Railway you will host it for free with database mysql or postgres. you have in start 5$ per month free, and my usage is around 2,1$/month with strapi and postgres database. plus is you verify with card you will get 10$ per month.

also your app will auto-scale if it needs more resource.