Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Use Github Actions
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • Shopify Integration
        • WooCommerce Integration
      • Payment
        • Stripe Integration
        • Integrating Paddle
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
      • Authentication
        • Supabase Integration
        • Clerk Integration
    • Best Practices
      • Use the Deepseek-R1 model to quickly build a conversational AI site
      • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
      • How to Quickly Build a Blog Site
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes

Supabase Integration

Supabase is an open-source alternative to Firebase. Use a Postgres database, identity authentication, real-time API, edge functions, real-time subscriptions, storage, and vector embeddings to start your project. Integrate EdgeOne Pages with Supabase to achieve data operations.


Overview

This guide provides step-by-step instructions for quickly integrating Supabase on the EdgeOne Pages platform. By connecting to a database, it enables more flexible page interactions. The example uses Supabase as the database, but the same deployment method is equally applicable to other similar databases, with largely consistent integration principles.


Getting Started

You can choose our Supabase integration template and click the Supabase Auth Starter template to start development directly. This tutorial is roughly divided into three steps: Supabase configuration, local integration, and Pages deployment. The following will introduce the detailed operations of each step.


Configuring Supabase

1. Register a Supabase Account and Create a Project

Go to Supabase.com to register an account. Click Start your project, then Create your project. In this step, if Git is not associated, you must associate Git (supports Github/Gitee). Deployment takes about two minutes.


2. Initializing a Database

Enter the created Project. You can initialize your data table in the left-side Table Editor, design the table structure, and define the data fields to be stored.


3. Connecting to the Database

In the leftmost navigation pane, select API Docs. Upon entry, you will be directed to Introduction by default. Click on Connect above to select the connection method.
Supabase connect
Supabase connect

Select the program framework and Router method, integrate based on the instructions. Here, select Next.js and Pages Router as an example.



4. Filling in the Key

Create a .env.local file for local development, then write URL and KEY into it. Here's an example using variables prefixed with NEXT_PUBLIC, which may cause warnings or errors in some frameworks.
NEXT_PUBLIC_SUPABASE_URL=https://url.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=key
If you need to fill in more link parameters, such as service_role or JWT Settings, you can select Project Settings -> Data API in the left sidebar, then find the relevant parameters.



5. Creating a Service Connection

import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseKey);


6. Performing Data Operations

import { supabase } from '../utils/supabase'
const data = await supabase.from('todos').select()
 Note that setting RLS to disabled may result in data access failure.




Deploying to EdgeOne Pages

Publishing Code to Git

Step one: Create a New project in the remote repository. In GitHub, enter Dashboard, click New, fill in the project name, and click Create repository to Create a Git project.

Associate local code with the remote repository, upload the local code, and execute the following commands in the local project root directory. You can also refer to the steps on Github to complete the process.
# Push your code to your git repository (e.g. GitHub, Gitee).

git init
git add .
git commit -m "First commit"
git remote add origin "your Git address"
git push -u origin master


Select a Deployment Project

Enter the EdgeOne Pages console, click Create project -> Import Git repository, and select your project.


3. Add an Environment Variable

Configure Pages variables. The Variable Name should be consistent with the variable names in the .env.local file of the local project, then fill in the Value.
EdgeOne supabase template variable
EdgeOne supabase template variable

After filling in the parameters, click Start Deployment to begin deployment, which will take 1-3 minutes. If the project fails during deployment, you can modify the project based on Build Logs and Build Summary information, or contact staff for resolution.



More Related Content

Learn more about Supabase: Supabase Operation Document