Creating Edge Functions with Deno in Supabase - Quick Revision & Summary

Recall & Review

beginner

What is an Edge Function in the context of Supabase and Deno?

An Edge Function is a small piece of code that runs close to users on the network edge, using Deno runtime in Supabase. It helps respond quickly to requests by running near the user instead of a central server.

beginner

Why use Deno for Edge Functions instead of Node.js?

Deno is secure by default, supports modern JavaScript and TypeScript without extra setup, and is lightweight, making it ideal for fast, small edge functions.

beginner

How do you deploy an Edge Function in Supabase using Deno?

You write your function code in a file, then use the Supabase CLI command `supabase functions deploy ` to upload and activate it on the edge.

intermediate

What is the role of the `Request` and `Response` objects in a Deno Edge Function?

The `Request` object contains details about the incoming user request, like headers and body. The function processes it and returns a `Response` object with status, headers, and body to send back.

intermediate

Name one best practice when writing Edge Functions with Deno on Supabase.

Keep functions small and fast, avoid long-running tasks, and handle errors gracefully to ensure quick responses and reliability at the edge.

What runtime does Supabase use for its Edge Functions?

A Ruby

B Node.js

C Deno

D Python

Supabase Edge Functions run on the Deno runtime, which is designed for secure and fast execution.

Which command deploys an Edge Function in Supabase?

A deno deploy <function-name>

B supabase functions deploy <function-name>

C supabase deploy edge <function-name>

D supabase edge run <function-name>

The correct command to deploy an Edge Function is `supabase functions deploy `.

What is a key benefit of running functions at the network edge?

A Faster response times to users

B More storage space

C Easier database management

D Longer function execution time

Running functions at the edge reduces distance to users, resulting in faster responses.

Which language can you write Edge Functions in when using Supabase with Deno?

A TypeScript

B Java

C PHP

D C++

Deno supports TypeScript natively, so you can write Edge Functions in TypeScript.

What should you avoid in Edge Functions to keep them efficient?

A Using environment variables

B Using HTTP requests

C Returning responses

D Long-running tasks

Long-running tasks slow down edge functions and reduce performance; keep them short and fast.

Explain how to create and deploy an Edge Function using Deno on Supabase.

Think about the steps from coding to deployment and runtime environment.

Describe the benefits of running functions at the edge with Deno in Supabase.

Consider speed, security, and language features.

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