Supabase Integration
Supabase is an open-source alternative to Firebase. Start your project with a Postgres database, identity authentication, instant APIs, edge functions, real-time subscriptions, storage, and vector embedding. Integrate EdgeOne Pages with Supabase to manipulate data.
Overview
This guide provides step descriptions for quickly integrating Supabase on the EdgeOne Pages platform. Achieve more flexible page interaction through database connectivity. The example uses Supabase, but the same deployment method is likewise suitable for other databases of the same type, with similar integration principles.
Getting Started
You can choose our Supabase integration template, click the Supabase Auth Starter template, and start developing directly. This tutorial is roughly divided into three steps: Supabase configuration, local integration, and Pages deployment. The following introduces each step in detail.
Supabase Configuration
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 online Git associated, you must associate Git (support Github/Gitee). 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 stored data fields.
3. Connect to Database
In the leftmost navigation bar, select
API Docs. By default, you will enter Introduction. Click Connect above to select a connection method.
Select the program framework and Router method, as instructed for integration. Here, select
Next.js and Pages Router as an example.
4. Fill in Key
Create
.env.local in local development, then write to URL and KEY. Here is an example of variables starting with NEXT_PUBLIC, which may trigger warnings or errors in some frameworks.NEXT_PUBLIC_SUPABASE_URL=https://url.supabase.coNEXT_PUBLIC_SUPABASE_ANON_KEY=key
If you need to fill in more link parameters, such as
service_role or JWT Settings, select Project Settings -> Data API in the left sidebar, then find the related parameters.
5. Create 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 database operations, visit
Table Editor in the left sidebar. After selecting the corresponding table, view API Docs in the left panel. The document provides various operation examples and detailed instructions. Note: Setting RLS disabled may cause data access failure.
Deploying to EdgeOne Pages
1. Publishing Code to Git
Step one: Create a New project in the remote repository. Enter
Dashboard in GitHub, 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 local code. Execute the following commands in the project root directory locally. 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 initgit 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. Keep the
Variable Name consistent with the variable name in the local project's .env.local, then fill in the Value.
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 it based on the Build Logs and Build Summary, or contact staff to resolve the issue.
More Related Content
Learn more about Supabase: Supabase Operation Document