Strapi deploy guide for Render

Pablo Coronado — Mon, 27 Feb 2023 13:38:11 +0000

Render is a cloud computing platform that provides an easy and affordable way to deploy and manage web applications. Strapi is an open-source headless CMS that allows developers to build APIs quickly and easily. In this guide, we will discuss how to deploy Strapi on Render after you have completed development and testing.

Prerequisites

Before you begin, you will need the following:

A Render account
A Strapi project
A database (Render supports Postgres and MySQL)
A GitHub or GitLab repository

In your Strapi code

Create the folder config/env/production.

Add the file database.js with the following code:

const { parse } = require("pg-connection-string");

module.exports = ({ env }) => {
  const { host, port, database, user, password } = parse(env("DATABASE_URL"));

  return {
    connection: {
      client: 'postgres',
      connection: {
        host,
        port,
        database,
        user,
        password,
        ssl: { rejectUnauthorized: false },
      },
      debug: false,
    },
  }
};

You need to install pg and pg-connection-string.

After doing this, create the server.js file with the following code:

module.exports = ({ env }) => ({
  proxy: true,
  url: env('HOST_URL'), // Sets the public URL of the application.
  app: {
    keys: env.array('APP_KEYS')
  },
});

Steps

Create a new PostgreSQL database on Render. In this case I select version 14 of PostrgreSQL.
Create a new Web Service on Render: From the Render dashboard, click on "Create a new Web Service."
Select the GitHub or GitLab repository: Choose the repository where your Strapi project is stored.
Add Environment Variables: To configure your Strapi project, you need to add environment variables that include your database credentials and any other variables required by your project. The variables that you need to include are:
- ADMIN_JWT_SECRET
- API_TOKEN_SALT
- APP_KEYS
- DATABASE_URL
- JWT_SECRET
- HOST_URL

Deploy the Web Service: Click "Create Web Service" to deploy your Strapi project to Render.

After this steps your Render dashboard should look like this:

Adding Cloudinary

To add Cloudinary to your project, follow these steps:

Create a Cloudinary account.
Add environment variables to Render with the following values:
- CLOUDINARY_NAME
- CLOUDINARY_KEY
- CLOUDINARY_SECRET

Create a file called plugins.js with the following code:

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: {},
      },
    },
  },
  // ...
});

To fix the preview in the Strapi dashboard, change middlewares.js with the following code:

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Conclusion