Go back Building a Slick Blog with Supabase, React, Astro, and Cloudflare – Part 1: Getting Started with Supabase /* by Tirth Bodawala - August 17, 2024 */ Tech Update Alright, let’s kick things off! We’re diving into the first part of our blog-building journey where we get cozy with Supabase. This is where all the magic starts—your backend. In this part, we’ll spin up a Supabase project, create our essential tables (Posts and UserProfile), and establish the relationships that’ll make everything click together. Ready to get your hands dirty? Let’s do this. What we’ll cover: Part 1: Getting Started with Supabase Setting Up a Supabase Project Creating the Posts Table Creating the UserProfile Table Establishing Relationships Between Tables Part 2: Fine-Tuning Your Database with Policies, Functions, and Triggers Automating with Functions and Triggers Securing Your Data with Row-Level Security (RLS) Policies Preventing Updates to Unique IDs Ensuring Email Consistency in User Profiles Optimizing Your Database with Indexes Part 3: Setting up your admin interface Setting Up the Project with Astro and React Configuring Environment Variables Creating Supabase Utilities Building the Admin Interface Part 4: Connecting the Frontend to Supabase Initializing Tailwind CSS Creating the Blog Layout Building the Blog List and Post Components Setting Up the Homepage Creating the Blog Post Route Part 5: Deploying the Blog with Cloudflare Setting Up a Cloudflare Account Deploying Your Astro Site on Cloudflare Configuring DNS and SSL for Secure Access 1. Setting Up a Supabase Project First things first—if you haven’t heard of Supabase yet, it’s like Firebase but with a cool Postgres backbone. It gives you the database, authentication, and storage all in one slick package. Perfect for our blog, right? Step 1: Sign Up and Create a Project Head over to Supabase and get yourself signed up. Once you’re in: Create a New Project: Give it a name, set a strong password (you know the drill), and choose a region close to where your audience hangs out. Project Settings: After your project is ready, jot down your API keys and URL. We’ll need those later when we hook up the backend to our React frontend. Step 2: Dive into the SQL Editor Supabase gives you this neat SQL editor right in the dashboard. This is where we’re going to set up our database schema. 2. Creating the Posts Table Every blog needs a place to store its posts, and that’s where our Posts table comes in. This table is going to hold everything from the post title to the content, images, and even the author’s ID. Here’s the SQL to get you started: CREATE TABLE Posts ( id uuid PRIMARY KEY DEFAULT uuid_generate_v4(), -- Primary key, auto-generated UUID title text NOT NULL, -- Title of the post, cannot be null featured_images jsonb DEFAULT '[]'::jsonb, -- featured_images as json object for the post slug text NOT NULL, -- URL-friendly identifier, can be duplicated unique_id text NOT NULL UNIQUE, -- Unique identifier, must be unique across all posts excerpt text, -- excerpt of the post content text, -- Content of the post author uuid REFERENCES auth.users(id) ON DELETE SET NULL, -- Foreign key linked to Auth.Users table, sets to NULL if user is deleted author_profile uuid REFERENCES UserProfile(id) ON DELETE SET NULL, -- Foreign key linked to Auth.Users table, sets to NULL if user is deleted created_at timestamp with time zone DEFAULT now(), -- Timestamp for when the post was created updated_at timestamp with time zone DEFAULT now(), -- Timestamp for when the post was last updated deleted_at timestamp with time zone, -- Timestamp for soft delete (optional) publish_date timestamp with time zone DEFAULT now() -- Date and time when the post should be published ); What’s Happening Here? id uuid PRIMARY KEY: Every post gets a unique ID, thanks to UUIDs. featured_images jsonb: We’re storing images as JSON objects—perfect for when you want to get fancy with multiple images. slug and unique_id: These make your URLs clean and SEO-friendly. author: A reference to the auth.users table (which Supabase sets up for you) to keep track of who wrote what. 3. Creating the UserProfile Table Now, let’s make sure our authors have some personality. The UserProfile table will store the user’s name, bio, and other profile-related goodies. CREATE TABLE UserProfile ( id uuid PRIMARY KEY DEFAULT uuid_generate_v4(), -- Primary key, auto-generated UUID user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE, -- Foreign key linked to auth.users table, cascades on delete name text NOT NULL, -- Name of the user, cannot be null bio text, -- Optional bio field for user profile email text NOT NULL, -- Email of the user, copied from auth.users created_at timestamp with time zone DEFAULT now(), -- Timestamp for when the profile was created updated_at timestamp with time zone DEFAULT now() -- Timestamp for when the profile was last updated ); Breakdown: user_id: This links back to the user’s ID in the auth.users table, ensuring that we can connect posts to their authors. bio: A little something about the author, because every good blog needs an “About the Author” section. 4. Establishing Relationships Between Tables Now that we’ve got our tables, it’s time to make them talk to each other. Foreign Keys: We’ve already set up our foreign keys (author in Posts and user_id in UserProfile). These are the bridges between your tables. Joins: When we start querying data, these relationships will let us pull in the author’s name and bio whenever we grab a post. It’s all connected, and Supabase makes it super easy to keep everything in sync. Wrapping Up Part 1 Boom! We’ve laid the foundation of our blog. Your Supabase project is up, your tables are ready, and the relationships are set. In the next part, we’ll dive into locking down access to content using Supabase’s Row-Level Security (RLS). Stay tuned, and keep that terminal warm—we’re just getting started! Next Up: Part 2 – Implementing Role-Based Access Control We’re going to make sure only the right eyes see the right content, and it’s going to be smooth, secure, and seamless. Want to dive deeper? Check out the Supabase Docs for more on setting up your project, or stay tuned for Part 2 where we’ll get into the nitty-gritty of securing your blog content!
