Development Environment
Set up your local development environment for Edge Functions.
Before getting started, make sure you have the Supabase CLI installed. Check out the CLI installation guide for installation methods and troubleshooting.
Step 1: Install Deno CLI
The Supabase CLI doesn't use the standard Deno CLI to serve functions locally. Instead, it uses its own Edge Runtime to keep the development and production environment consistent.
You can follow the Deno guide for setting up your development environment with your favorite editor/IDE.
The benefit of installing Deno separately is that you can use the Deno LSP to improve your editor's autocompletion, type checking, and testing. You can also use Deno's built-in tools such as deno fmt
, deno lint
, and deno test
.
After installing, you should have Deno installed and available in your terminal. Verify with deno --version
Step 2: Set up your editor
Set up your editor environment for proper TypeScript support, autocompletion, and error detection.
VSCode/Cursor (recommended)
-
Install the Deno extension from the VSCode marketplace
-
Option 1: Auto-generate (easiest) When running
supabase init
, selecty
when prompted "Generate VS Code settings for Deno? [y/N]" -
Option 2: Manual setup
Create a
.vscode/settings.json
in your project root:1234{ "deno.enablePaths": ["./supabase/functions"], "deno.importMap": "./supabase/functions/import_map.json"}
This configuration enables the Deno language server only for the supabase/functions
folder, while using VSCode's built-in JavaScript/TypeScript language server for all other files.
Multi-root workspaces
The standard .vscode/settings.json
setup works perfectly for projects where your Edge Functions live alongside your main application code. However, you might need multi-root workspaces if your development setup involves:
- Multiple repositories: Edge Functions in one repo, main app in another
- Microservices: Several services you need to develop in parallel
For this development workflow, create edge-functions.code-workspace
:
123456789101112131415161718192021222324{ "folders": [ { "name": "project-root", "path": "./" }, { "name": "test-client", "path": "app" }, { "name": "supabase-functions", "path": "supabase/functions" } ], "settings": { "files.exclude": { "node_modules/": true, "app/": true, "supabase/functions/": true }, "deno.importMap": "./supabase/functions/import_map.json" }}
You can find the complete example on GitHub.
Recommended project structure
It's recommended to organize your functions according to the following structure:
12345678910111213141516└── supabase ├── functions │ ├── import_map.json # Top-level import map │ ├── _shared # Shared code (underscore prefix) │ │ ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key │ │ ├── supabaseClient.ts # Supabase client with ANON key │ │ └── cors.ts # Reusable CORS headers │ ├── function-one # Use hyphens for function names │ │ └── index.ts │ └── function-two │ └── index.ts ├── tests │ ├── function-one-test.ts │ └── function-two-test.ts ├── migrations └── config.toml
- Use "fat functions". Develop few, large functions by combining related functionality. This minimizes cold starts.
- Name functions with hyphens (
-
). This is the most URL-friendly approach - Store shared code in
_shared
. Store any shared code in a folder prefixed with an underscore (_
). - Separate tests. Use a separate folder for Unit Tests that includes the name of the function followed by a
-test
suffix.
Essential CLI commands
Get familiar with the most commonly used CLI commands for developing and deploying Edge Functions.
supabase start
This command spins up your entire Supabase stack locally: database, auth, storage, and Edge Functions runtime. You're developing against the exact same environment you'll deploy to.
supabase functions serve [function-name]
Develop a specific function with hot reloading. Your functions run at http://localhost:54321/functions/v1/[function-name]
. When you save your file, you’ll see the changes instantly without having to wait.
Alternatively, use supabase functions serve
to serve all functions at once.
supabase functions serve hello-world --no-verify-jwt
If you want to serve an Edge Function without the default JWT verification. This is important for webhooks from Stripe, GitHub, etc. These services don't have your JWT tokens, so you need to skip auth verification.
Be careful when disabling JWT verification, as it allows anyone to call your function, so only use it for functions that are meant to be publicly accessible.
supabase functions deploy hello-world
Deploy the function when you’re ready