Supabase Integration
This guide provides step-by-step instructions for quickly integrating Supabase on the EdgeOne Makers platform. Connecting to a database enables more flexible page interactions. The example uses Supabase, but the same deployment method applies to other databases of the same type, with similar integration concepts.
Getting Started
You can select our Supabase integration template. Click the Supabase Auth Starter template to start development directly. This tutorial is roughly divided into three steps: Supabase configuration, local integration, and Makers deployment. The following sections detail the specific operations for each step.
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 a program framework and Router method, then integrate according to the guide. Here,
Next.js and Makers Router are selected as examples.
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 Makers
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
Go to the EdgeOne Makers console, choose
Create project -> Import Git repository, and select your project.3. Adding an Environment Variable
Configure Makers variables. Ensure the
Variable Name matches 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
