Supabase storage bucket

[Shayan5785]

I was wondering how can i implement the supabase adapter in this plugin.
#4983

[DanRibbens]

Are you looking to use supabase as your db? For that all you need to do is follow the db-postgres database adapter setup and use your connection string from supabase. Read this https://payloadcms.com/docs/database/postgres and let us know if anything is unclear.

If you're looking for cloud storage for uploads, that was something we had a PR for, but I'm struggling to find now.

[Shayan5785]

I have already implemented the database part. Right now, I am struggling to implement the Supabase bucket with payload. But if you happen to come across any details about it later, kindly share. That will help me a lot.

[fhorray]

did you manage to do the connections with supabase buckets? I'm trying to do it myself but no results till now.

[iljapanic]

Also looking to use Supabase storage with Payload. It should theoretically be straightforward to use the S3 adapter now that Supabase is S3-compatible, but I'm having issues.

Here is my adapter configuration:

const supabaseStorageAdapter = s3Adapter({
  bucket: process.env.S3_BUCKET,
  config: {
    endpoint: process.env.S3_ENDPOINT,
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
    region: process.env.S3_REGION,
  },
});

I get getaddrinfo ENOTFOUND <BUCKET>.XXXXXXXX.supabase.co error:

   err: {
      "type": "Error",
      "message": "getaddrinfo ENOTFOUND <BUCKET>.XXXXXXXX.supabase.co",
      "stack":
          Error: getaddrinfo ENOTFOUND <BUCKET>.XXXXXXXX.supabase.co
              at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:108:26)
      "errno": -3008,
      "code": "ENOTFOUND",
      "syscall": "getaddrinfo",
      "hostname": "<BUCKET>.XXXXXXXX.supabase.co",
      "$metadata": {
        "attempts": 1,
        "totalRetryDelay": 0
      }
    }

I suspect it has something to do with the bucket property, which is required by the s3Adapter(). It prepends the bucket to the endpoint like such <BUCKET>.XXXXXXXX.supabase.co but the format used by Supabase is: XXXXXXXX.supabase.co/storage/v1/object/public/<BUCKET>/example.jpeg

[iljapanic]

Any updates on this? @DanRibbens @denolfe

Supabase Storage support in Payload has been marked as planned in January (#4936).

Supabase Storage is officially S3 compatible since April, so it should hopefully not require a huge deal of additional work to get it working using existing S3 adapters.

It would be great to get this working. I'd like to start using Payload, but the lack of Supabase storage support was a deal-breaker on two projects for me in the past month. I'm sure many folks who are striving to use a modern frontend stack would also appreciate it.

[kendevco]

I spent more time than I can recall, at least roughly 18 hours, on getting Payload CMS to work with Supabase storage since the Supabase with Payload YouTube video was released. That being said, I’ve finally got it working with beta.52 – hallelujah! I will post an extensive article detailing my configuration hopefully soon. In the meantime, you can check out my foliomark4 public repo on GitHub. You should be able to pull it and theoretically get it working, although it’s missing environment variables which should be deducible from the code. It works on my machine, just have to figure out how to get it to work on Vercel now. I love Payload CMS!

Edit 2406241826: I'm leaving my previous edit intact. I ended up having to scrap using Supabase's S3. The S3 adapter is configured to automatically prepend the bucket name to the beginning of the endpoint url. There's no way around this apparently. I thought I got it working in Payload 3.0 with the new storage adapter but I've downloaded and configured and played with the E-Commerce template and gotten cloud storage working with that and I had to go to https://cloud.linode.com/object-storage/ and configure a new bucket. Now I've got to go back and see if this works with my Payload CMS 3.0 project. In the meantime I'm working through the JSM Youtube video Build and Deploy a Full Stack E-Commerce App with an Admin Dashboard & CMS in 2024 | Next 14, Stripe
https://youtu.be/3JUsg-WsU9o?si=XYnv5hz4SOu4fhjb

S3_BUCKET_NAME=jsm-ecommerce
S3_ACCESS_KEY=LAasedfasdfadsfyourkey
S3_SECRET_KEY=asfasdflkasjdfkaljsdfkasdjkjdfk asdfyourkeyasefd
S3_ENDPOINT=https://us-southeast-1.linodeobjects.com
S3_REGION=us-southeast

Edit 2406241826: I've spent the whole day troubleshooting this. I got it working on my machine, but when I tried to replicate it on another machine, the site loaded without any images. Then, I went back to my original machine, and now all the images are returning 500 errors.

I think the long and the short of it is that you must use the storage-s3 adapter with Payload CMS 3.0 beta. Like I said, for a very brief moment, I got it running with beta .53... :(.

Here’s a detailed breakdown of what I’ve tried and the current setup:

Environment Variables

PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER=s3
S3_BUCKET_NAME=kendev-folio
S3_ACCESS_KEY=your_access_key
S3_SECRET_KEY=your_secret_key
S3_ENDPOINT=https://ficsmjqfqefwcbdiyuei.supabase.co/
S3_REGION=us-east-1

Issues Encountered
Local Development vs. Deployment: Initially, I had the endpoint configured as https://ficsmjqfqefwcbdiyuei.supabase.co, which worked locally but not when deployed. Changing the endpoint to https://ficsmjqfqefwcbdiyuei.supabase.co/storage/v1/s3 worked in my test S3-Client (below) but not with my folio app using Payload; Note: the correct endpoint should not include /storage/v1/s3 which is in fact what worked when I got it working. Go figure.

In any event, you can see my config in the repo, I've just updated it: https://github.com/kendevco/foliomark4

API Key Issue: I got an API Key error initially when the wrong endpoint url was set. The error message indicating "No API key found in request" resolved once endpoint set correctly in s3 test client.
I checked permissions in my bucket - made them accessible to anon.
Checked permissions on the Media collection.

Right now, separate settings have enabled images to load. I can't figure out how to set a breakpoint in a package (yet) otherwise I'd've figured out what the issue was.

It would be really great to have new videos on the Payload YouTube Channel covering:

Setting Up a Payload 3.0 Development Environment: A comprehensive guide similar to setting up a DNN environment (https://youtu.be/zLB6uzdqGF8?si=Oh9s87Bs0xLh4aYn).
Submitting a Pull Request Soup to Nuts: Detailed instructions on contributing to Payload, akin to the DNN tutorial. (https://youtu.be/M2nwC9YqDY4?si=b5C68aCgtemMgt0I)
Development of Existing Payload Packages: A deep dive into developing and extending Payload packages.
Dynamic Pages Development: Insights into creating dynamic pages with Payload CMS, showcasing real-world examples and best practices.
I hope this helps others struggling with the same issue. Feel free to reach out if you have any questions or need further assistance. Together, we can make integrating Supabase storage with Payload CMS a seamless experience!

Test Client which did work:

server.js:
require('dotenv').config();
const express = require('express');
const { S3Client, GetObjectCommand } = require('@aws-sdk/client-s3');
const path = require('path');

const app = express();
const port = 3000;

const s3Client = new S3Client({
  region: process.env.S3_REGION,
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY,
    secretAccessKey: process.env.S3_SECRET_KEY,
  },
  endpoint: process.env.S3_ENDPOINT,
  forcePathStyle: true,
});

const streamToBuffer = async (readableStream) => {
  const chunks = [];
  for await (const chunk of readableStream) {
    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk);
  }
  return Buffer.concat(chunks);
};

app.get('/media/:filename', async (req, res) => {
  const { filename } = req.params;
  const bucket = process.env.S3_BUCKET_NAME;

  try {
    const command = new GetObjectCommand({
      Bucket: bucket,
      Key: path.posix.join('', filename),
    });

    const object = await s3Client.send(command);

    if (!object.Body) {
      return res.status(404).send('Not Found');
    }

    const bodyBuffer = await streamToBuffer(object.Body);

    res.set({
      'Accept-Ranges': String(object.AcceptRanges),
      'Content-Length': String(object.ContentLength),
      'Content-Type': String(object.ContentType),
      ETag: String(object.ETag),
    });

    res.status(200).send(bodyBuffer);
  } catch (err) {
    console.error('Error occurred:', err);
    if (err.$response) {
      console.error('Response body:', err.$response.body);
    }
    res.status(500).send('Internal Server Error');
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});`

Perhaps if you've read this far, you might know of good resources for learning how to set up a Payload CMS 3.0 development environment? Additionally, a good tutorial on debugging Payload CMS packages/plugins would be really helpful.

I see Payload CMS as the DotNetNuke of Next.js – which it pretty much is. I started with DNN at version 2.1.2 back in 2003/4, and I believe Payload CMS is even cooler. It's way better in many ways but could still take some pointers from DNN.

I've committed to using Payload CMS for all of my Next.js projects moving forward. It is quite frustrating because I have been so eagerly anticipating the release of Payload CMS 3.0. It is so awesome in beta but very frustrating with this whole cloud storage thing. I spent about 16 hours or so integrating it into my static portfolio site converting all the controls into 'client' and 'server' controls. I had everything all nice and upgraded and running great on my machine. Then I was even able to deploy it to Vercel and it ran. However, I didn't realize the default media adapter which saves files to the local server doesn't work when deployed to Vercel.

Back to the drawing board.

So now, I've essentially recreated my portfolio site - my test bed, so to speak - four times. This fourth time, I actually got it to work after probably another 40 or so hours battling and learning how the storage adapter works. Or not. Pretty much at 0 on figuring out how to step through a package/plugin.

One significant improvement would be to have a default site dynamically generated from a default page collection, enabling users to use the block-based content builder, as referenced in the Payload CMS documentation. This would allow users to create and manage their site's structure more intuitively right from the start. The site could still be conventionally updated with other routes in the app folder, but this default setup would provide a robust dynamic site out of the box.

This concept is somewhat addressed by the current corporate website demo app, although it hasn't been updated to Payload 3.0 yet. The corporate website template demonstrates many capabilities and serves as a good starting point. Additionally, the updated eCommerce starter template, which I am looking forward to exploring, will likely cover the remaining use cases. Would be great to have a guide on how to contribute to these as well. On YouTube preferably :). Go JavaScript Mastery JSM who introduced me to Payload CMS with their excellent YouTube course on modifying the Payload ECommerce Template. I've been waiting since then for Payload CMS 3.0.

[sourabpramanik]

What I can grasp is everything works fine in the current stable version but not with the beta version correct? Please help me understand because I am going to create plugins specifically for 3.0

[luoxi]

Hi

I ran into the same pesky issue, but I found a nifty solution!
Just add endpoint: process.env.S3_ENDPOINT and forcePathStyle: true to your payload.config.ts settings,
and you should be good to go!

Here's my settings for Supabase Storage:

s3Storage({
  collections: {
    media: true,
  },
  bucket: process.env.S3_BUCKET,
  config: {
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
    region: process.env.S3_REGION,
    endpoint: process.env.S3_ENDPOINT,
    forcePathStyle: true
  },
}),

Give it a whirl and see if it solves the problem for you too.
Good luck and happy coding!

[tc-Toni]

For me it worked by adding this to the config:

• for public buckets you can set disablePayloadAccessControl: true so you get images directly from s3 (which is faster the through payload acces control)
• generateFileURL so that the url that is stored in payload is correct