بنقرة واحدة
supabase-edge-functions
Use when creating, naming, or organizing Supabase Edge Functions
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
Use when creating, naming, or organizing Supabase Edge Functions
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when deploying Cloudflare Workers, managing R2 storage, or working with Cloudflare infrastructure
Use when working with ANTD components, theme tokens, icons, forms, or feedback components (message/notification/modal)
Use when adding, referencing, or serving static assets (images, fonts, videos, 3D models) through the R2 CDN pipeline with type-safe imports
Use when writing or reviewing JavaScript/TypeScript code for style patterns like concise arrows, inline handlers, expression formatting, or when tempted to use eslint-disable
Use when working with environment variables in frontend code
Use when creating or modifying keyboard shortcuts/hotkeys in frontend code
| name | supabase-edge-functions |
| description | Use when creating, naming, or organizing Supabase Edge Functions |
Guidelines for creating Supabase Edge Functions, including naming conventions, import configuration, and common patterns.
Each Edge Function folder MUST have its own deno.json file with import mappings. Deno does not support bare module specifiers like Node.js.
{
"compilerOptions": {
"lib": ["deno.window", "deno.ns"],
"strict": true
},
"imports": {
"supabase": "https://esm.sh/@supabase/supabase-js@2",
"http-server": "https://deno.land/std@0.168.0/http/server.ts"
}
}
| Bare Specifier | Deno Import URL |
|---|---|
"supabase" | "https://esm.sh/@supabase/supabase-js@2" |
"http-server" | "https://deno.land/std@0.168.0/http/server.ts" |
"@codemirror/state" | "npm:@codemirror/state@6.5.2" |
"@codemirror/collab" | "npm:@codemirror/collab@6.1.1" |
"diff" | "npm:diff@5.2.0" |
{
"compilerOptions": {
"lib": ["deno.window", "deno.ns"],
"strict": true
},
"imports": {
"supabase": "https://esm.sh/@supabase/supabase-js@2",
"http-server": "https://deno.land/std@0.168.0/http/server.ts",
"@codemirror/state": "npm:@codemirror/state@6.5.2",
"@codemirror/collab": "npm:@codemirror/collab@6.1.1",
"diff": "npm:diff@5.2.0"
}
}
// ❌ Wrong - bare specifiers don't work without deno.json
import { serve } from "http-server";
import { createClient } from "supabase";
// Error: Relative import path "supabase" not prefixed with / or ./ or ../
Fix: Create deno.json in the function folder with proper import mappings.
Structure: [namespace]_[sub-namespace]_[action-words]
| Separator | Used For | Example |
|---|---|---|
_ | Namespace boundaries | page-scene_script_ |
- | Words within a segment | create-script |
All names are lowercase. No uppercase letters.
supabase/functions/
├── page-scene_script_create-script/
│ ├── index.ts
│ └── deno.json
├── page-scene_script_delete-script/
│ ├── index.ts
│ └── deno.json
├── file-browser_upload-start/
│ ├── index.ts
│ └── deno.json
└── _shared_validate-token/
├── index.ts
└── deno.json
Why flat structure? Supabase CLI only discovers functions at the root level of /supabase/functions/. Nested subdirectories are not supported.
Convert frontend entity names by:
| Frontend Entity | Edge Function Prefix |
|---|---|
PageScene_Script | page-scene_script_ |
PageOrganization_Projects | page-organization_projects_ |
FileBrowser | file-browser_ |
PageProject_SetCard | page-project_set-card_ |
Derived from Page or feature names:
page-scene_ # From Page_Scene
page-organization_ # From Page_Organization
file-browser_ # From FileBrowser feature
storage_ # Domain-level namespace
auth_ # Domain-level namespace
Derived from subcomponent or entity names:
page-scene_script_ # From PageScene_Script
page-scene_timeline_ # From PageScene_Timeline
file-browser_upload_ # Grouped upload functions (optional)
Verb-noun pattern with hyphens:
create-script
delete-file
generate-upload-url
send-invitation
validate-token
# Using Supabase CLI
npx supabase functions new page-scene_script_create-script
# Or manually
mkdir supabase/functions/page-scene_script_create-script
touch supabase/functions/page-scene_script_create-script/deno.json
Add appropriate imports based on dependencies needed.
import { serve } from "http-server";
import { createClient } from "supabase";
const supabaseUrl = Deno.env.get("SUPABASE_URL")!;
const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
"Access-Control-Allow-Methods": "POST, OPTIONS",
};
serve(async (req: Request) => {
if (req.method === "OPTIONS") {
return new Response(null, { status: 204, headers: corsHeaders });
}
// Your function logic here
return new Response(JSON.stringify({ success: true }), {
headers: { ...corsHeaders, "Content-Type": "application/json" },
});
});
Use _shared_ prefix for cross-cutting functions:
_shared_validate-token
_shared_check-permissions
_shared_send-notification
When to use _shared_:
Edge function URLs use the folder name directly:
| Function Name | URL |
|---|---|
page-scene_script_create-script | /functions/v1/page-scene_script_create-script |
_shared_validate-token | /functions/v1/_shared_validate-token |
# ❌ Wrong - missing deno.json (causes import errors)
supabase/functions/my-function/
└── index.ts
# ✅ Correct - includes deno.json
supabase/functions/my-function/
├── index.ts
└── deno.json
# ❌ Wrong - nested folders (not supported by Supabase)
page-scene/script/create-script
# ❌ Wrong - uppercase letters
PageScene_Script_CreateScript
# ❌ Wrong - using hyphens for namespace separation
page-scene-script-create-script
# ❌ Wrong - no namespace prefix
create-script
# ✅ Correct
page-scene_script_create-script
Existing functions should be migrated to namespaced structure:
| Current (Legacy) | Target (Namespaced) |
|---|---|
delete-file | file-browser_delete-file |
generate-upload-url | storage_generate-upload-url |
invite-member | page-organization_invite-member |