Skip to content

zernonia/supabase-cdn-transformation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


Supabase Storage CDN & Transformation (Alternative Unofficial)

Secured & Simple Supabase Storage CDN & Transformation (Self-hosted).

View Tutorial Β· Report Bug Β· Request Feature

Deploy with Vercel

Supabase CDN & Transformation

πŸš€ Features

  • ☁ CDN
  • 🀚 Image Transformation (width, height, quality)
  • πŸš€ 1-Click Deploy!
  • πŸ”’ Hosted on your own Vercel instance
  • πŸ‘€ No Sensitive info required

πŸ“‡ Inspiration/Showcase

I had a website called Made With Supabase, which showcase projects that made with Supabase. A problem occurs to me where the images load super-duper slow. Hence, I started to look into this issue.

It turns out that some of the images has around 5MB 🀯, which is too high quality, and wasting data quota as well for all my visitors!

Then, I found out that Supabase Storage's CDN and Transformation still Working in Progress. I don't want to wait any longer, and thus, I've created this simple Serverless CDN and Image Transformation service for everyone! πŸŽ‡βœ¨πŸŽ‰.

πŸ”¨ Built With

🐾 Instructions

  1. Click Deploy with Vercel
  2. Create a new Git repo.
  3. Create a team? You can skip it.
  4. Key in SUPABASE_URL (only support 1 project at once) in the Environment Variables.
  5. Wait for deployment
  6. Congratulations! Your serverless function is up and running! Enjoy !!! πŸŽ‰
  7. 🌟 this repo, 🐀 this project, β˜• buy me a coffee?
  8. Learn more from this Blog post.

How to use

Here are some of the parameter to pass along the new image's url.

w: width          (number of pixel)    // optional
h: height         (number of pixel)    // optional
f: file_name      (eg: avatar.png)
b: bucket_name    (eg: static)
q: quality        (0 to 100)           // optional
  1. Click Deploy button above and follow the instruction above.
  2. Wrap all the images url in your project's <img> with the following code.
    https://{ url-for-the-serverless-function-you-just-deployed }/api/resize?...
  3. Pass the parameter into the url as query string. (eg:)
    https://.../api/resize?f=avatar.png&b=static&w=1200
  4. Insert the link into <img src="here" > and you are done!

πŸ“œ License

Not Associated with Supabase.

Distributed under the MIT License. See LICENSE for more information.

πŸ“§ Contact

Twitter - @zernonia

Also, if you like my work, please buy me a coffee β˜•πŸ˜³

Logo