Creating Edge Functions with Deno in Supabase - Practice Exercises

Challenge - 5 Problems

❓ service_behavior

intermediate

What is the output of this Deno Edge Function?

Consider this simple Deno Edge Function deployed on Supabase:

export async function handler(req: Request) {
  const url = new URL(req.url);
  const name = url.searchParams.get('name') || 'Guest';
  return new Response(`Hello, ${name}!`, { status: 200 });
}

What will be the response body if the function is called with the URL https://example.com?name=Alice?

Supabase

export async function handler(req: Request) {
  const url = new URL(req.url);
  const name = url.searchParams.get('name') || 'Guest';
  return new Response(`Hello, ${name}!`, { status: 200 });
}

A Hello, Alice!

B Hello, Guest!

C Error: name parameter missing

D Hello, undefined!

💡 Hint

Check how the function reads query parameters from the URL.

The function extracts the 'name' parameter from the URL query string. If it exists, it uses that value; otherwise, it defaults to 'Guest'. Since the URL has '?name=Alice', the response is 'Hello, Alice!'.

❓ Configuration

intermediate

Which option correctly configures environment variables for a Supabase Edge Function using Deno?

You want to securely access a database URL inside your Deno Edge Function on Supabase. Which configuration method correctly injects the environment variable DATABASE_URL?

A Use a global JavaScript variable declared outside the function to store the database URL.

B Pass the database URL as a query parameter in the request URL and read it inside the function.

C Set <code>DATABASE_URL</code> in the Supabase project settings under 'Environment Variables' and access it in code via <code>Deno.env.get('DATABASE_URL')</code>.

D Hardcode the database URL string directly inside the Edge Function code.

💡 Hint

Think about secure ways to handle secrets in cloud functions.

Supabase allows setting environment variables securely in project settings. Inside Deno Edge Functions, these can be accessed using Deno.env.get(). Hardcoding or passing secrets in URLs is insecure.

❓ Architecture

advanced

Which architecture best describes how Supabase Edge Functions with Deno handle incoming HTTP requests?

Supabase Edge Functions run on Deno and respond to HTTP requests. Which description best fits their architecture?

A Each HTTP request triggers a new isolated Deno runtime instance that runs the function and then shuts down immediately after responding.

B A single long-running Deno process handles all requests sequentially without isolation between them.

C Requests are queued and processed in batches by a shared Deno runtime to optimize resource usage.

D The Edge Function runs on a dedicated virtual machine that stays active 24/7 regardless of traffic.

💡 Hint

Think about how serverless functions typically run to scale efficiently.

Supabase Edge Functions run in isolated Deno runtimes per request to ensure security and scalability. Each request triggers a fresh instance that runs the function and then shuts down.

❓ security

advanced

What is the safest way to restrict access to a Supabase Edge Function?

You want only authenticated users to call your Edge Function. Which method provides the best security?

A Require users to send their username and password as query parameters to the function.

B Check the Supabase JWT token in the request headers inside the Edge Function and verify it before processing.

C Allow all requests but log the IP addresses for manual review later.

D Use a public API key hardcoded in the function code to allow access.

💡 Hint

Think about how authentication tokens work in modern web apps.

Verifying the JWT token in request headers ensures only authenticated users can access the function. Sending credentials in query parameters or hardcoding keys is insecure.

✅ Best Practice

expert

Which practice optimizes cold start performance for Supabase Edge Functions written in Deno?

Cold starts can slow down your Edge Functions. Which approach best reduces cold start latency?

A Use global variables to store user data between requests.

B Include large libraries and modules to handle all possible use cases in one function.

C Write synchronous blocking code to ensure sequential execution.

D Minimize external dependencies and keep the function code small and focused.

💡 Hint

Think about what affects startup time in serverless functions.

Smaller code and fewer dependencies reduce the time needed to start the Deno runtime, improving cold start performance. Large libraries and blocking code increase latency. Global variables do not persist between invocations.

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