Creating Edge Functions with Deno in Supabase - Try It Yourself

Creating Edge Functions with Deno

📖 Scenario: You are building a simple serverless function using Deno on Supabase Edge Functions. This function will respond to HTTP requests with a greeting message. Edge Functions run close to users for fast responses.

🎯 Goal: Create a basic Edge Function using Deno that returns a JSON greeting message when called.

📋 What You'll Learn

Create a new Edge Function file named hello.ts.

Define a handler function that accepts a Request object.

Return a JSON response with a greeting message.

Export the handler as the default export.

💡 Why This Matters

🌍 Real World

Edge Functions let you run code close to users without managing servers. This improves speed and scalability for web apps.

💼 Career

Knowing how to write and deploy Edge Functions is valuable for cloud developers working with serverless architectures and modern backend services.

1

Create the Edge Function file

Create a new file named hello.ts and define an async function called handler that accepts a single parameter request of type Request. For now, leave the function body empty.

Supabase

async function handler(request: Request) {
  // Your code here
}

Hint

Start by writing the function signature for handler with async and a request parameter.

2

Create a JSON response object

Inside the handler function, create a constant called responseBody and assign it an object with a single key message and value "Hello from Supabase Edge Function!".

Supabase

async function handler(request: Request) {
  // Create responseBody object here
  // Your code here
}

Hint

Use const responseBody = { message: "Hello from Supabase Edge Function!" } inside the function.

3

Return the JSON response

Return a new Response object from the handler function. Use JSON.stringify(responseBody) as the body, and set the Content-Type header to application/json.

Supabase

async function handler(request: Request) {
  const responseBody = { message: "Hello from Supabase Edge Function!" };
  // Return JSON response here
  // Your code here
}

Hint

Use return new Response(JSON.stringify(responseBody), { headers: { "Content-Type": "application/json" } }).

4

Export the handler as default

Add a default export statement at the end of the file to export the handler function.

Supabase

async function handler(request: Request) {
  const responseBody = { message: "Hello from Supabase Edge Function!" };
  return new Response(JSON.stringify(responseBody), {
    headers: { "Content-Type": "application/json" }
  });
}
// Export handler as default
// Your code here

Hint

Write export default handler; at the end of the file.

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