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
  - Error Codes
- Build Guide
- Deployment Guide
  - Overview
  - Create Deploys
  - Manage Deploys
  - Deploy Button
- 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
    - WooCommerce Integration
  - Payment
    - Stripe Integration
  - CMS
    - WordPress Integration
    - Contentful Integration
    - Sanity Integration
  - Authentication
    - 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
- 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

Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey

Supabase Integration

Supabase is an open-source alternative to Firebase. Use a Postgres database, identity authentication, real-time APIs, edge functions, real-time subscriptions, storage, and vector embeddings to start your project. Integrate EdgeOne Pages with Supabase to perform 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 the same 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. Each step's specific operations will be introduced in detail below.
﻿
Configure 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 there is no need to associate with an online Git, you must associate Git (supports Github/Gitee). The deployment takes about two minutes. 
﻿
2. Initialize Database
Enter the created Project. You can initialize your data table in the left-side Table Editor, design the table structure, and define the fields for stored data.
﻿
3. Connect 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
﻿
Select the program framework and Router method, integrate as instructed. Here, choose Next.js and Pages Router as examples.
﻿
﻿
4. Enter the Key
Create a .env.local file for local development, then write URL and KEY into it. This example uses variables prefixed with NEXT_PUBLIC, which may generate 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. Create 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. Perform Data Operations
import { supabase } from '../utils/supabase'
const data = await supabase.from('todos').select()
To learn more about comprehensive database operation guides, visit the Table Editor in the left sidebar. After selecting the corresponding table, you can view the API Docs in the left panel. The document provides various operation examples and detailed explanations. Note to set RLS disabled, which may cause data access failure.
﻿
﻿
﻿
Deploy to EdgeOne Pages
1. Publishing Code to Git
Step 1: 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 and upload the local code. 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
﻿
2. Selecting a Deployment Project
Enter the EdgeOne Pages console, click Create project -> Import Git repository, and select your project.
﻿
3. Adding an Environment Variable
Configure Pages variables. Ensure the Variable Name matches the variable names in the .env.local file of the local project, then fill in the Value.
EdgeOne supabase template variable
﻿
After filling in the parameters, click Start Deployment to begin the deployment, which will take 1-3 minutes. If the project encounters a deployment failure, you can modify the project based on the Build Logs and Build Summary information, or contact staff to resolve the issue.
﻿
﻿
More Related Content
Learn more about Supabase: Supabase Operation Document
﻿