Strapi deploy guide for Render
Tags: strapi, javascript, webdev, cloud
Published: 2023-02-27 13:38:11

[Render](https://render.com/) is a cloud computing platform that provides an easy and affordable way to deploy and manage web applications. [Strapi](https://strapi.io/) 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:

```jsx
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:

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


## Steps

1. **Create a new PostgreSQL database on Render**. In this case I select version 14 of PostrgreSQL.
2. **Create a new Web Service on Render:** From the Render dashboard, click on "Create a new Web Service."
3. **Select the GitHub or GitLab repository:** Choose the repository where your Strapi project is stored.
4. **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
    

![Environment variables in Render](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saskf6jdpm8ckbnsatyk.png)
    
5. **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:

![Render dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcgo04vkyc1w7kli0wli.png)

## Adding Cloudinary

To add Cloudinary to your project, follow these steps:

1. Create a Cloudinary account.
2. Add environment variables to Render with the following values:
    - CLOUDINARY_NAME
    - CLOUDINARY_KEY
    - CLOUDINARY_SECRET
3. Create a file called `plugins.js` with the following code:
    
    ```jsx
    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: {},
          },
        },
      },
      // ...
    });
    
    ```
    
4. To fix the preview in the Strapi dashboard, change `middlewares.js` with the following code:

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


In this guide, we discussed how to deploy Strapi on Render. Render provides an easy and affordable way to deploy web applications, and Strapi is an open-source headless CMS that allows developers to build APIs quickly and easily. By following the steps outlined in this guide, you should now have a deployed Strapi project running on Render.