Supabase for Web Apps: Complete Guide to Integration & Deployment

Introduction

Supabase is an open-source Firebase alternative that lets you build powerful backends in minutes — with PostgreSQL, Auth, Storage, Edge Functions, and Realtime built-in. Whether you’re building a full-stack app or just need authentication and a database, Supabase is a solid choice.

In this guide, we’ll cover:

• Installing Supabase CLI
  
• Integrating Supabase with a frontend app (React/TypeScript)
  
• Creating and deploying Edge Functions
  
• Managing secrets and environment variables
  
• Configuring API URLs and keys
  
• Creating database tables with RLS
  

Let’s get started.

1. Install Supabase CLI

To get started with Supabase locally, you’ll need the CLI installed.

Install via npm

npm install -g supabase

You can confirm it’s working with:
supabase --version

2. Initialize a Supabase Project

In your project folder:

supabase init

This sets up a local Supabase project with:

supabase/config.toml


supabase/functions/ (for Edge Functions)


supabase/migrations/ (for DB schema)

3. Start Supabase Locally (Optional)

If you want to run Supabase locally:

supabase start

This spins up Supabase (DB, Auth, Studio, etc.) using Docker.

To stop it:

supabase stop

4. Configure Supabase URL and API Keys

You’ll need your Supabase URL and Anon/Public API Key for frontend integration.

Go to your Supabase Dashboard:

• Navigate to your project > Settings > API
• Copy: Project URL and anon key (for public frontend usage)
  

Set these in .env

VITE_SUPABASE_URL=https://xyzcompany.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

5. Frontend Integration (React + TypeScript)

Install Supabase client:

npm install @supabase/supabase-js

Add the client:

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL!,
  import.meta.env.VITE_SUPABASE_ANON_KEY!
)

export default supabase

Now you can use Supabase to authenticate users, insert data, fetch rows, and more.

6. Creating a Table with SQL

Create a SQL file supabase/migrations/001_create_profiles.sql:

create table profiles (
  id uuid primary key references auth.users(id),
  full_name text,
  created_at timestamp default now()
);

Push the migration:

supabase db push

This will update your Supabase database with the new table.

7. Enable Row Level Security (RLS)

By default, Supabase protects your data using RLS.

Enable it:

ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

Add a policy:
CREATE POLICY "Users can access their profile"
ON profiles FOR SELECT USING (auth.uid() = id);

8. Create and Deploy Edge Functions

Edge Functions are serverless functions that run close to your users — great for APIs, logic, webhooks, and more.

Create a new function:

Supabase functions new hello

It creates: supabase/functions/hello/index.ts

Add basic handler:

// supabase/functions/hello/index.ts
import { serve } from 'https://deno.land/[email protected]/http/server.ts'

serve((req) => new Response("Hello from Supabase Edge Function!"))

Deploy it:

supabase functions deploy hello

You’ll get a URL like:

https://your-project.functions.supabase.co/hello

9. Setting Edge Function Secrets

To use environment variables securely in Edge Functions: environment variables securely in Edge Functions:

supabase secrets set MY_SECRET=value123

Access it inside your function:
const secret = Deno.env.get("MY_SECRET")

10. Call Edge Functions from Frontend

const res = await fetch(
  'https://your-project.functions.supabase.co/hello',
  {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${supabase.auth.getSession().access_token}`,
    },
  }
)

const text = await res.text()
console.log(text)

Conclusion

Supabase makes it easy to spin up a full backend in minutes — with authentication, a SQL database, file storage, serverless functions, and more. You now have everything you need to start building apps with Supabase and take advantage of its full feature set.

Whether you’re building an MVP, a SaaS product, or a learning platform, Supabase is an excellent choice.