Deno.serve for HTTP handling - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a basic HTTP server using Deno.serve.

Deno

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve({
  port: [1]
});

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

A5000

B3000

C80

D8080

Attempts:

3 left

💡 Hint

Common Mistakes

Using a port number that is reserved or requires admin rights like 80.

Leaving the port number blank or zero.

The standard port for many local HTTP servers is 8080. Here, you fill in the port number to start the server.

2fill in blank

medium

Complete the code to respond with 'Hello World' to every HTTP request.

Deno

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(req => new Response([1]));

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

A"Hello World"

BHello World

CResponse("Hello World")

D{ body: "Hello World" }

Attempts:

3 left

💡 Hint

Common Mistakes

Passing unquoted text which causes a syntax error.

Passing an object instead of a string to Response.

The Response constructor expects a string or a body as its first argument. We pass the string "Hello World" to create the response body.

3fill in blank

hard

Fix the error in the code to correctly handle HTTP requests and respond with JSON.

Deno

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(req => {
  const data = { message: "Hi" };
  return new Response(JSON.stringify([1]), {
    headers: { "Content-Type": "application/json" }
  });
});

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

Amessage

Bdata

CJSON

Dreq

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string key instead of the object to JSON.stringify.

Passing the request object instead of data.

We need to stringify the 'data' object to send it as JSON in the response body.

4fill in blank

hard

Fill both blanks to create a server that responds with the request method and URL in plain text.

Deno

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(req => {
  const method = req.[1];
  const url = req.[2];
  return new Response(`Method: ${method}, URL: ${url}`);
});

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

Amethod

Burl

Cpathname

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pathname' or 'href' which are properties of URL objects, not the request.

Mixing up method and url properties.

The request object has a 'method' property for HTTP method and a 'url' property for the full URL string.

5fill in blank

hard

Fill all three blanks to create a server that responds with JSON containing the request method, pathname, and a custom header value.

Deno

import { serve } from "https://deno.land/std@0.177.0/http/server.ts";

serve(req => {
  const url = new URL(req.[1]);
  const method = req.[2];
  const customHeader = req.headers.get([3]);
  const responseData = {
    method: method,
    pathname: url.pathname,
    customHeader: customHeader
  };
  return new Response(JSON.stringify(responseData), {
    headers: { "Content-Type": "application/json" }
  });
});

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

Aurl

Bmethod

C"x-custom-header"

D"content-type"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' or 'pathname' directly on request instead of creating URL object.

Passing header name without quotes.

Mixing up method and url properties.

The request's URL string is in 'url', the HTTP method in 'method', and the custom header is accessed by its exact name as a string.

Practice

1. What does Deno.serve primarily do in a Deno application?

easy

A. It creates a simple HTTP server that listens for requests.

B. It compiles TypeScript code into JavaScript.

C. It manages database connections automatically.

D. It formats JSON data for API responses.

Solution

1. Step 1: Understand the purpose of Deno.serve

   Deno.serve is designed to start an HTTP server that listens for incoming requests.

2. Step 2: Compare options with this purpose

   Only It creates a simple HTTP server that listens for requests. describes creating an HTTP server. Other options describe unrelated tasks.

3. Final Answer:

   It creates a simple HTTP server that listens for requests. -> Option A

4. Quick Check:

   Deno.serve creates HTTP server [OK]

Hint: Deno.serve starts a server to handle HTTP requests [OK]

Common Mistakes:

• Confusing Deno.serve with code compilation
• Thinking it manages databases
• Assuming it formats data automatically

2. Which of the following is the correct way to use Deno.serve to respond with "Hello World" to every request?

easy

A. Deno.serve(() => new Response.text("Hello World"));

B. Deno.serve(request => Response("Hello World"));

C. Deno.serve(() => Response.text("Hello World"));

D. Deno.serve(() => new Response("Hello World"));

Solution

1. Step 1: Check the correct Response object creation

   In Deno, to send a response, you create a new Response object with the body text.

2. Step 2: Validate syntax of each option

   Deno.serve(() => new Response("Hello World")); correctly uses new Response("Hello World"). Options A, B, and C misuse Response creation or methods.

3. Final Answer:

   Deno.serve(() => new Response("Hello World")); -> Option D

4. Quick Check:

   Use new Response() to send reply [OK]

Hint: Always use new Response() to send HTTP replies [OK]

Common Mistakes:

• Omitting 'new' keyword before Response
• Using Response as a function instead of a constructor
• Calling non-existent Response.text method

3. What will the following code output when accessed via a browser?

import { serve } from "https://deno.land/std/http/server.ts";

Deno.serve(req => {
  if (req.url.endsWith("/json")) {
    return new Response(JSON.stringify({ message: "Hi" }), {
      headers: { "Content-Type": "application/json" },
    });
  }
  return new Response("Not JSON");
});

medium

A. The browser shows: Not JSON

B. The browser shows: {"message":"Hi"} with JSON content type

C. The browser shows a 404 error

D. The server crashes with an error

Solution

1. Step 1: Analyze the request URL condition

   The code checks if the URL ends with '/json'. If yes, it returns JSON; otherwise, it returns "Not JSON".

2. Step 2: Determine the output for a normal browser request

   A browser accessing the root URL (e.g., http://localhost:8000/) does not end with '/json', so it returns "Not JSON" as plain text.

3. Final Answer:

   The browser shows: Not JSON -> Option A

4. Quick Check:

   URL ends with '/json'? No = "Not JSON" [OK]

Hint: Check URL endings carefully to predict response [OK]

Common Mistakes:

• Assuming all requests return JSON
• Ignoring URL path in condition
• Expecting server errors without syntax issues

4. Identify the error in this Deno.serve usage:

Deno.serve(async (req) => {
  const data = await req.json();
  return new Response(data);
});

medium

A. Cannot call req.json() on a Request object

B. Response constructor expects a string or Uint8Array, not an object

C. Missing await before new Response()

D. Deno.serve does not support async functions

Solution

1. Step 1: Understand req.json() usage

   Calling await req.json() correctly parses JSON body from the request.

2. Step 2: Check Response constructor argument

   The Response constructor expects a string or binary data, but data is an object, causing a type error.

3. Final Answer:

   Response constructor expects a string or Uint8Array, not an object -> Option B

4. Quick Check:

   Response body must be string or bytes, not object [OK]

Hint: Always stringify objects before passing to Response [OK]

Common Mistakes:

• Passing raw object to Response instead of string
• Thinking req.json() is invalid on Request
• Assuming async functions are unsupported

5. You want to create a Deno server that responds with "Hello, {name}!" where {name} is a query parameter from the URL (e.g., /?name=Alice). Which code snippet correctly implements this?

hard

A. Deno.serve(req => {
const url = req.url;
const name = url.params.name || 'Guest';
return new Response(`Hello, ${name}!`);
});

B. Deno.serve(req => {
const name = req.query.name || 'Guest';
return new Response(`Hello, ${name}!`);
});

C. Deno.serve(req => {
const url = new URL(req.url);
const name = url.searchParams.get('name') || 'Guest';
return new Response(`Hello, ${name}!`);
});

D. Deno.serve(req => {
const name = req.get('name') || 'Guest';
return new Response(`Hello, ${name}!`);
});

Solution

1. Step 1: Extract query parameters from request URL

   Use new URL(req.url) to parse the URL and access searchParams for query parameters.

2. Step 2: Get 'name' parameter safely and respond

   Use url.searchParams.get('name') with fallback to 'Guest', then return a Response with the greeting string.

3. Final Answer:

   Deno.serve(req => { const url = new URL(req.url); const name = url.searchParams.get('name') || 'Guest'; return new Response(`Hello, ${name}!`); }); -> Option C

4. Quick Check:

   Use URL and searchParams to read query [OK]

Hint: Parse req.url with URL to access query parameters [OK]

Common Mistakes:

• Assuming req has query or params properties
• Trying to get query params directly from req
• Using non-existent req.get() method