Creating Edge Functions with Deno in Supabase

Introduction

Edge Functions let you run small programs close to users for faster responses. Deno is a simple tool to write these programs safely.

You want to run code that responds quickly to user actions on your website.

You need to process data or requests without waiting for a full server.

You want to add custom logic like authentication or data filtering near users.

You want to reduce delays by running code geographically close to users.

Syntax

Supabase

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(async (req) => {
  // Your code here
  return new Response("Hello from Edge Function!", { status: 200 });
});

Use serve to start your function and handle requests.

Return a Response object to send data back to the user.

Examples

A simple function that always replies with "Hi there!".

Supabase

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(() => new Response("Hi there!"));

This function reads a name from the URL and greets that name.

Supabase

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(async (req) => {
  const url = new URL(req.url);
  const name = url.searchParams.get("name") || "friend";
  return new Response(`Hello, ${name}!`);
});

Sample Program

This Edge Function responds with a greeting when the path is "/hello" and returns 404 for other paths.

Supabase

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(async (req) => {
  const url = new URL(req.url);
  if (url.pathname === "/hello") {
    return new Response("Hello from your Edge Function!", { status: 200 });
  }
  return new Response("Not Found", { status: 404 });
});

Important Notes

Edge Functions run in a secure, limited environment for safety.

Deno uses modern JavaScript and TypeScript, so you can use new language features.

Keep functions small and fast for best performance near users.

Summary

Edge Functions run code close to users for speed.

Deno provides a simple way to write these functions using serve.

Return Response objects to send replies to requests.

Practice

1. What is the main purpose of creating Edge Functions with Deno in Supabase?

easy

A. To run code close to users for faster response times

B. To store large amounts of data in the cloud

C. To create user interfaces for web apps

D. To manage database schemas automatically

Solution

1. Step 1: Understand Edge Functions role

   Edge Functions run code near users to reduce delay and improve speed.

2. Step 2: Compare options

   Only To run code close to users for faster response times describes running code close to users for faster responses, which matches Edge Functions purpose.

3. Final Answer:

   To run code close to users for faster response times -> Option A

4. Quick Check:

   Edge Functions = run code near users [OK]

Hint: Edge Functions speed up responses by running near users [OK]

Common Mistakes:

• Confusing Edge Functions with database storage
• Thinking Edge Functions build UI
• Assuming Edge Functions manage schemas

2. Which of the following is the correct way to start an Edge Function using Deno's serve method?

easy

A. Response(serve(() => 'Hello from Edge!'))

B. serve = new Response('Hello from Edge!')

C. new serve(() => Response('Hello from Edge!'))

D. serve(() => new Response('Hello from Edge!'))

Solution

1. Step 1: Recall Deno serve syntax

   Deno's serve function takes a handler function returning a Response object.

2. Step 2: Check options

   serve(() => new Response('Hello from Edge!')) correctly calls serve with a function returning new Response. Others misuse syntax or order.

3. Final Answer:

   serve(() => new Response('Hello from Edge!')) -> Option D

4. Quick Check:

   serve(handler returning Response) = correct [OK]

Hint: serve needs a function returning new Response [OK]

Common Mistakes:

• Assigning serve instead of calling it
• Using Response without new keyword
• Passing string directly instead of Response

3. Given this Edge Function code snippet, what will be the response text when a request is made?

import { serve } from "https://deno.land/std/http/server.ts";
serve(() => new Response('Edge Function Active'));

medium

A. Edge Function Active

B. undefined

C. Error: serve not found

D. No response

Solution

1. Step 1: Analyze the code

   The serve function is imported correctly and called with a handler returning Response with text 'Edge Function Active'.

2. Step 2: Determine output

   When a request arrives, the handler returns Response with body 'Edge Function Active', so that text is sent back.

3. Final Answer:

   Edge Function Active -> Option A

4. Quick Check:

   serve returns Response text = 'Edge Function Active' [OK]

Hint: Response text is what handler returns inside new Response() [OK]

Common Mistakes:

• Assuming serve is undefined without import
• Expecting no response without explicit return
• Confusing Response object with string

4. Identify the error in this Edge Function code snippet:

import { serve } from "https://deno.land/std/http/server.ts";
serve(() => Response('Hello'));

medium

A. serve is not imported correctly

B. Missing 'new' keyword before Response

C. Arrow function syntax is invalid

D. Response cannot be used in Edge Functions

Solution

1. Step 1: Check Response usage

   Response is a class and must be instantiated with 'new'. The code calls Response() without 'new'.

2. Step 2: Verify other parts

   serve is imported correctly, arrow function syntax is valid, and Response is allowed in Edge Functions.

3. Final Answer:

   Missing 'new' keyword before Response -> Option B

4. Quick Check:

   Response needs 'new' keyword [OK]

Hint: Always use 'new Response()' to create response objects [OK]

Common Mistakes:

• Forgetting 'new' before Response
• Assuming serve import is wrong
• Thinking arrow function syntax is incorrect

5. You want to create an Edge Function that returns JSON data with a message and status code 200. Which code snippet correctly implements this using Deno's serve?

hard

A. serve(() => new Response({ message: 'Success' }, { headers: { 'Content-Type': 'application/json' } }))

B. serve(() => Response({ message: 'Success' }, { status: 200 }))

C. serve(() => new Response(JSON.stringify({ message: 'Success' }), { headers: { 'Content-Type': 'application/json' }, status: 200 }))

D. serve(() => new Response('Success', { status: 200, headers: { 'Content-Type': 'application/json' } }))

Solution

1. Step 1: Understand JSON response requirements

   Response body must be a string, so JSON data must be stringified. Headers must specify 'application/json'. Status code 200 is set in options.

2. Step 2: Evaluate options

   serve(() => new Response(JSON.stringify({ message: 'Success' }), { headers: { 'Content-Type': 'application/json' }, status: 200 })) correctly stringifies JSON, sets headers and status. serve(() => Response({ message: 'Success' }, { status: 200 })) misses 'new' and stringifies incorrectly. serve(() => new Response({ message: 'Success' }, { headers: { 'Content-Type': 'application/json' } })) passes object directly as body (invalid). serve(() => new Response('Success', { status: 200, headers: { 'Content-Type': 'application/json' } })) sends plain string 'Success' not JSON.

3. Final Answer:

   serve(() => new Response(JSON.stringify({ message: 'Success' }), { headers: { 'Content-Type': 'application/json' }, status: 200 })) -> Option C

4. Quick Check:

   JSON.stringify + headers + status = correct [OK]

Hint: JSON body must be stringified and Content-Type set [OK]

Common Mistakes:

• Passing object directly as body without stringifying
• Omitting 'new' before Response
• Not setting Content-Type header to application/json