Creating Edge Functions with Deno in Supabase - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Deno HTTP server module.

Supabase

import { serve } from "[1]";

Drag options to blanks, or click blank then click option'

Ahttps://deno.land/std@0.177.0/io/util.ts

Bhttps://deno.land/std@0.177.0/fs/mod.ts

Chttps://deno.land/std@0.177.0/path/mod.ts

Dhttps://deno.land/std@0.177.0/http/server.ts

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from the file system or path modules instead of HTTP server.

Using an incorrect version or URL.

The Deno HTTP server module is imported from the URL ending with /http/server.ts.

2fill in blank

medium

Complete the code to start the Deno server listening on port 8000.

Supabase

serve((req) => new Response("Hello from Edge!"), { port: [1] });

Drag options to blanks, or click blank then click option'

A5000

B8000

C3000

D8080

Attempts:

3 left

💡 Hint

Common Mistakes

Using ports like 8080 or 3000 which are common but not the example default.

Using string instead of number.

Port 8000 is the default port used in many Deno Edge function examples.

3fill in blank

hard

Fix the error in the response header to set JSON content type.

Supabase

return new Response(JSON.stringify({ message: "Hi" }), { headers: { "Content-Type": [1] } });

Drag options to blanks, or click blank then click option'

A"application/json"

B"text/plain"

C"text/html"

D"application/xml"

Attempts:

3 left

💡 Hint

Common Mistakes

Using text/plain or text/html which are for plain text or HTML content.

Using application/xml which is for XML data.

The correct content type for JSON responses is application/json.

4fill in blank

hard

Fill both blanks to create a Deno Edge function that responds with a JSON message and status 200.

Supabase

export default async function handler(req) {
  return new Response(JSON.stringify({ message: "[1]" }), { status: [2], headers: { "Content-Type": "application/json" } });
}

Drag options to blanks, or click blank then click option'

AHello from Edge

B404

C200

DError

Attempts:

3 left

💡 Hint

Common Mistakes

Using error messages or wrong status codes like 404.

Forgetting to stringify the JSON.

The message should be a friendly greeting and the status code 200 means success.

5fill in blank

hard

Fill all three blanks to create a Deno Edge function that reads a query parameter 'name' and responds with a personalized greeting in JSON.

Supabase

export default async function handler(req) {
  const url = new URL(req.url);
  const name = url.searchParams.get("[1]") || "Guest";
  const body = JSON.stringify({ greeting: `Hello, [2]!` });
  return new Response(body, { status: [3], headers: { "Content-Type": "application/json" } });
}

Drag options to blanks, or click blank then click option'

Ausername

Bname

C200

D404

E${name}

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong query parameter keys.

Using incorrect status codes.

Not using the variable inside the greeting.

The query parameter is 'name', the greeting uses that variable, and status 200 means success.

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