You're reading from Building Production-Grade Web Applications with Supabase A comprehensive guide to database design, security, real-time data, storage, multi-tenancy, and more

Product type Paperback

Published in Aug 2024

Publisher Packt

ISBN-13 9781837630684

Length 534 pages

Edition 1st Edition

Languages

Typescript

Tools

Next.js

Concepts

Application Development

Author (1):

David Lorenz

View More author details

Table of Contents (20) Chapters

Preface

1. Part 1:Creating the Foundations of the Ticket System App

2. Chapter 1: Unveiling the Inner Workings of Supabase and Introducing the Book’s Project FREE CHAPTER

3. Chapter 2: Setting Up Supabase with Next.js

4. Chapter 3: Creating the Ticket Management Pages, Layout, and Components

5. Part 2: Adding Multi-Tenancy and Learning RLS

6. Chapter 4: Adding Authentication and Application Protection

7. Chapter 5: Crafting Multi-Tenancy through Database and App Design

8. Chapter 6: Enforcing Tenant Permissions with RLS and Handling Tenant Domains

9. Chapter 7: Adding Tenant-Based Signups, including Google Login

10. Part 3: Managing Tickets and Interactions

11. Chapter 8: Implementing Dynamic Ticket Management

12. Chapter 9: Creating a User List with RPCs and Setting Ticket Assignees

13. Chapter 10: Enhancing Interactivity with Realtime Comments

14. Chapter 11: Adding, Securing, and Serving File Uploads with Supabase Storage

15. Part 4: Diving Deeper into Security and Advanced Features

16. Chapter 12: Avoiding Unwanted Data Manipulation and Undisclosed Exposures

17. Chapter 13: Adding Supabase Superpowers and Reviewing Production Hardening Tips

18. Index

Why subscribe?

19. Other Books You May Enjoy

Serving image attachments directly in the UI

We have already discussed how direct URL usage, such as using <img src="BUCKET_FILE_URL" />, is possible only with a public bucket. However, when using a private bucket, we still want to preview uploaded images within a comment in the UI. Additionally, even with a public bucket, where you can easily use the file link to display an image, there are times when you might want to show a lower-resolution version of the image instead of the original.

That’s why, in this section, I want to expand on the possibility of using direct URLs to serve and view optimized images within an application, even with private buckets, and show you how to use Image Transformations to get magically converted versions of images.

Using Image Transformations

Even though a public bucket allows us to view an image without restrictions, it might not be the cleverest choice to simply put the original file path into an image. This is because...