Creating Edge Functions with Deno in Supabase - Visual Walkthrough

Process Flow - Creating Edge Functions with Deno

Write Deno Function Code

↓

Save as edge function file

↓

Deploy to Supabase Edge

↓

Supabase runs function on request

↓

Function executes and returns response

↓

Client receives response

This flow shows how you write a Deno function, deploy it as an edge function on Supabase, and how it runs when a client calls it.

Execution Sample

Supabase

export async function handler(req) {
  return new Response('Hello from Edge!')
}

A simple Deno edge function that returns a greeting response when called.

Process Table

Step	Action	Input	Output	Notes
1	Function receives HTTP request	Request object	N/A	Edge function triggered by client request
2	Function executes handler	Request object	Response object	Runs the exported handler function
3	Return response	N/A	Response object with message 'Hello from Edge!'	Response sent back to client
4	Client receives response	Response object	Displays message	Client sees 'Hello from Edge!'
5	End	N/A	N/A	Function execution complete

💡 Function completes after sending response to client

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
req	undefined	Request object	Request object	Request object	Request object
response	undefined	undefined	Response object	Response object	Response object

Key Moments - 3 Insights

Why does the function return a Response object instead of just a string?

The function must return a Response object because Supabase Edge expects HTTP responses with status and headers, not just plain strings. See execution_table step 3.

What triggers the edge function to run?

The edge function runs when it receives an HTTP request from a client, as shown in execution_table step 1.

Can the function access external APIs or databases?

Yes, inside the handler you can write code to fetch data or query databases before returning a response.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 3?

A 'Hello from Edge!' wrapped in a Response object

B Plain string 'Hello from Edge!'

C Request object

D Undefined

💡 Hint

Check the Output column in execution_table row for step 3

At which step does the client receive the response?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the Action and Notes columns in execution_table for when client gets the response

If the function returned a plain string instead of a Response object, what would happen?

A Supabase would automatically convert it to a Response

B The function would fail or return an error

C The client would receive the string without HTTP headers

D The function would run twice

💡 Hint

Refer to key_moments about why Response object is required

Concept Snapshot

Creating Edge Functions with Deno on Supabase:
- Write an async handler function that takes a request
- Return a Response object with your output
- Deploy the function to Supabase Edge
- Supabase runs it on HTTP requests
- Client receives the HTTP response
- Use Response for proper HTTP behavior

Full Transcript

This visual execution shows how to create and run edge functions using Deno on Supabase. First, you write a handler function that receives an HTTP request and returns a Response object. When deployed, Supabase runs this function whenever a client sends a request. The function executes, returns a response with a message, and the client receives it. Variables like the request and response objects change state during execution. Key points include the need to return a Response object and that the function triggers on HTTP requests. The quiz tests understanding of these steps and outputs.

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