Strapi with Supabase for Headless CMS and Database Management

What You’ll Need:

• Node.js and npm installed on your machine.
• A Supabase account.
• Basic understanding of REST APIs and PostgreSQL.
• Strapi installed.

Set Up a Supabase Project

1. Create a Supabase account at supabase.com and create a new project.

2. Once the project is created, from Projest settings select Database you will be given the credentials for connecting to the PostgreSQL database. Copy and paste the credentials in your convinence location such as Microsoft Notepad.

   

Install and setup strapi

1. Install from CLI.

   Strapi CLI (Command Line Interface) installation scripts are the fastest way to get Strapi running locally.

   Before installing Strapi, the following requirements must be installed on your computer:

   • Node.js: Only Active LTS or Maintenance LTS versions are supported (currently v18 and v20).
   • Your preferred Node.js package manager (npm v6 and above or yarn)

2. Creating strapi project.

   In a terminal, run the following command

   npx create-strapi@latest

   The terminal will ask you whether you want to Login/Signup to Strapi Cloud (and start using your free 14-day trial projects), or Skip this step. For demo purpose only skip this step.

   For the default database, make sure to select no, and chose postgres as default database and provide the credentials. After provide the database credentials leave everything as default.

   

   After the installation completed, navigate to your project directory, open your project in your prefer code editor such as Visual studio code.

   In the config folder, select database.ts file, update the database config file to tell strapi to use postgres as default database.

   export default ({ env }) => {
     postgres: {
       const client = env("DATABASE_CLIENT", "postgres");
   
       const connections = {
         postgres: {
           connection: {
             connectionString: env("DATABASE_URL"),
             host: env("DATABASE_HOST", "localhost"),
             port: env.int("DATABASE_PORT", 5432),
             database: env("DATABASE_NAME", "strapi"),
             user: env("DATABASE_USERNAME", "strapi"),
             password: env("DATABASE_PASSWORD", "strapi"),
             ssl: env.bool("DATABASE_SSL", false) && {
               key: env("DATABASE_SSL_KEY", undefined),
               cert: env("DATABASE_SSL_CERT", undefined),
               ca: env("DATABASE_SSL_CA", undefined),
               capath: env("DATABASE_SSL_CAPATH", undefined),
               cipher: env("DATABASE_SSL_CIPHER", undefined),
               rejectUnauthorized: env.bool(
                 "DATABASE_SSL_REJECT_UNAUTHORIZED",
                 true
               ),
             },
             schema: env("DATABASE_SCHEMA", "public"),
           },
           pool: {
             min: env.int("DATABASE_POOL_MIN", 2),
             max: env.int("DATABASE_POOL_MAX", 10),
           },
         },
       };
   
       return {
         connection: {
           client,
           ...connections[client],
           acquireConnectionTimeout: env.int(
             "DATABASE_CONNECTION_TIMEOUT",
             60000
           ),
         },
       };
     }
   };

3. Run strapi to check if it's setup correctly.

   Navigate to your strapi project

   cd your-strapi-project

   Run strapi

   npm run develop

   Strapi will start up, you can access the admin panel at http://localhost:1337/admin.

Advanced Features: Integrating Supabase Cloud Storage with Strapi

By default, Strapi uses local storage for media uploads. Since you’re already integrated with Supabase, using Supabase Cloud Storage is a great option to store your media files securely and scalably.

1. Create new supabase storage bucket.

   Log in to the Supabase Dashboard and navigate to the Storage service.

2. If you don’t already have a storage bucket, create a new one. To do this:

   • Click on Create New Bucket.
   • Provide a name for the bucket.
   • Ensure that the bucket is set to public for access.

3. Enable Row-Level Security (RLS)

   To grant Strapi full rights to upload, select, and delete media files in this bucket, you’ll need to create a policy that gives Strapi the necessary permissions.

   • In the Storage section of the Supabase Dashboard, select your storage bucket.
   • Navigate to Policies and click on New Policy.
   • Configure the policy to provide full control over the bucket for Strapi.
   • After setting up the policy, click Review and then Save.

   

   Goto project settings select API, copy the Project URL also with public anon key paste in your convinience location such as Microsoft Notepad.

   

   Update the .env file in your strapi project, add the following lines. For example if the SUPABASE_API_URL is https://pzwzqkidyyvhreumviku.supabase.co then value fro SUPABASE_URL would be pzwzqkjhcyvhreumviku.supabase.co

   SUPABASE_URL=
   SUPABASE_API_URL=
   SUPABASE_API_KEY=
   SUPABASE_BUCKET=
   SUPABASE_DIRECTORY=files

4. Configure strapi provider.

   Install strapi-provider-upload-supabase provider.

   npm i strapi-provider-upload-supabase

   After the installation completed, go to config folder, select plugins.ts file, update the file.

   export default ({ env }) => ({
     upload: {
       config: {
         provider: "strapi-provider-upload-supabase",
         providerOptions: {
           apiUrl: env("SUPABASE_API_URL"),
           apiKey: env("SUPABASE_API_KEY"),
           bucket: env("SUPABASE_BUCKET"),
           directory: env("SUPABASE_DIRECTORY"),
         },
         actionOptions: {
           upload: {},
           uploadStream: {},
           delete: {},
         },
       },
     },
   });

   To allow media to be loaded from supabase storage, goto middlewares.ts file to modify default strapi policy.

   export default ({ env }) => [
     "strapi::errors",
     {
       name: "strapi::security",
       config: {
         contentSecurityPolicy: {
           useDefaults: true,
           directives: {
             "connect-src": ["'self'", "https:"],
             "default-src": ["'self'"],
             "img-src": [
               "'self'",
               "data:",
               "blob:",
               "market-assets.strapi.io",
               env("SUPABASE_URL"),
             ],
             "media-src": [
               "'self'",
               "data:",
               "blob:",
               "market-assets.strapi.io",
               env("SUPABASE_URL"),
             ],
           },
         },
       },
     },
     "strapi::cors",
     "strapi::logger",
     "strapi::poweredBy",
     "strapi::query",
     "strapi::body",
     "strapi::session",
     "strapi::favicon",
     "strapi::public",
   ];

5. Start the strapi server.

   npm run develop

Final thoughs

By integrating Strapi with Supabase, you get the best of both worlds—a powerful CMS and a fully-featured, scalable backend. Whether you’re building content-driven websites or more complex applications, this setup offers flexibility, scalability, and ease of use.

Get started today by combining the power of Strapi's headless CMS with Supabase’s open-source backend!