Edge Functions Quickstart

Learn how to build an Edge Function locally and deploy it to the Supabase Platform in less than 7 minutes.

Prerequisites#

Follow the steps to prepare your Supabase project on your local machine.

• Install the Supabase CLI. Docs.
• Login to the CLI using the command: supabase login. Docs.
• Initialize Supabase inside your project using the command: supabase init. Docs.
• Link to your Remote Project using the command supabase link --project-ref your-project-ref. Docs.
• Optional: Setup your environment: Follow this setup guide to integrate the Deno language server with your editor.

Create an Edge Function#

Let's create a new Edge Function called hello-world inside your project:

1supabase functions new hello-world

This creates a function stub in your supabase folder at ./functions/hello-world/index.ts.

Deploy to production#

1supabase functions deploy hello-world

This command bundles your Edge Function from ./functions/hello-world/index.ts and deploys it to the Supabase platform. The command outputs a URL to the Supabase Dashboard which you can open to find view more details. Let's open the link to find the execution command.

Invoking remote functions#

You can invoke Edge Functions using curl:

1curl --request POST 'https://<project_ref>.functions.supabase.co/hello-world' \
2  --header 'Authorization: Bearer ANON_KEY' \
3  --header 'Content-Type: application/json' \
4  --data '{ "name":"Functions" }'

or using one of the client libraries, e.g. using supabase-js:

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

const { data, error } = await supabase.functions.invoke('hello-world', {
  body: { name: 'Functions' },
})

After invoking your Edge Function you should see the response { "message":"Hello Functions!" }.

Setting Up Your Environment#

You can follow the Deno guide for setting up your development environment with your favorite editor/IDE.

When developing with VS Code inside of an existing application, you can utilize multi-root workspaces.

For example, see this edge-functions.code-workspace configuration for a CRA (create react app) client with Supabase Edge Functions. You can find the complete example on GitHub.

{
  "folders": [
    {
      "name": "project-root",
      "path": "./"
    },
    {
      "name": "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"
  }
}

Database Functions vs Edge Functions#

For data-intensive operations we recommend using Database Functions, which are executed within your database and can be called remotely using the REST and GraphQL API.

For use-cases which require low-latency we recommend Edge Functions, which are globally-distributed and can be written in TypeScript.

Organizing your Edge Functions#

We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (_). We recommend this folder structure:

1└── supabase
2    ├── functions
3    │   ├── import_map.json # A top-level import map to use across functions.
4    │   ├── _shared
5    │   │   ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key.
6    │   │   └── supabaseClient.ts # Supabase client with ANON key.
7    │   │   └── cors.ts # Reusable CORS headers.
8    │   ├── function-one # Use hyphens to name functions.
9    │   │   └── index.ts
10    │   └── function-two
11    │       └── index.ts
12    ├── migrations
13    └── config.toml

Naming Edge Functions#

We recommend using hyphens to name functions because hyphens are the most URL-friendly of all the naming conventions (snake_case, camelCase, PascalCase).

Using HTTP Methods#

Edge Functions supports GET, POST, PUT, PATCH, DELETE, and OPTIONS. A function can be designed to perform different actions based on a request's HTTP method. See the example on building a RESTful service to learn how to handle different HTTP methods in your function.

Limitations#

• Deno Deploy limitations
  • Deno does not support outgoing connections to ports 25, 465, and 587.
  • Cannot read or write to File System
  • NPM modules are not supported.
• Edge Functions
  • Serving of HTML content is not supported (GET requests that return text/html will be rewritten to text/plain).