Serving static files in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when serving a static file with this Deno code?

Consider this Deno server code snippet that serves a static file named index.html. What will the server respond with when a client requests the root URL /?

Deno

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

serve(async (req) => {
  if (new URL(req.url).pathname === "/") {
    return await serveFile(req, "./index.html");
  }
  return new Response("Not Found", { status: 404 });
});

A The server responds with the contents of the file index.html and status 200.

B The server responds with a 404 Not Found error because serveFile is asynchronous.

C The server crashes because serveFile cannot be used inside serve callback.

D The server responds with an empty body and status 200.

💡 Hint

Think about what serveFile does and how the server handles the root path.

The serveFile function reads the file and returns a Response with the file content and status 200. Since the path is '/', the server returns the file content correctly.

📝 Syntax

intermediate

Which option correctly serves a static file with Deno's serveFile?

Identify the correct syntax to serve a file named style.css when the request path is /style.css.

Deno

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

serve(async (req) => {
  const url = new URL(req.url);
  if (url.pathname === "/style.css") {
    // Fill in the correct return statement here
  }
  return new Response("Not Found", { status: 404 });
});

A return await serveFile(req, "./style.css");

B return serveFile(req, "./style.css");

C return serveFile("./style.css");

D return await serveFile("./style.css");

💡 Hint

Remember that serveFile returns a Promise and needs the request object.

serveFile requires the request object and the file path, and it returns a Promise, so it must be awaited.

🔧 Debug

advanced

Why does this Deno server code fail to serve static files correctly?

This code attempts to serve static files from a folder named public. Why does it fail to serve files requested by the client?

Deno

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

serve(async (req) => {
  const url = new URL(req.url);
  const filePath = `./public${url.pathname}`;
  try {
    return await serveFile(req, filePath);
  } catch {
    return new Response("File not found", { status: 404 });
  }
});

A The code fails because the URL pathname includes query parameters that break the file path.

B The code fails because serveFile cannot serve files from subdirectories.

C The code fails because the server does not listen on any port.

D The code fails because it does not check if the file exists before calling serveFile, causing errors on directories.

💡 Hint

Think about what happens if the URL path is '/' or a directory.

If the URL path is a directory or does not correspond to a file, serveFile throws an error. The code does not handle directory requests or check file existence before serving.

🧠 Conceptual

advanced

What is the main advantage of using Deno's serveFile for static files?

Why is it better to use Deno's built-in serveFile function instead of manually reading files and creating responses for static file serving?

A serveFile caches files in memory permanently to speed up all requests.

B serveFile automatically sets correct Content-Type headers and handles range requests efficiently.

C serveFile only works with HTML files, ensuring security.

D serveFile disables logging to improve performance.

💡 Hint

Think about what headers and HTTP features static files need.

serveFile sets proper Content-Type headers based on file extension and supports HTTP features like range requests, which improves performance and compatibility.

❓ state_output

expert

What is the response status and body when requesting a missing static file?

Given this Deno server code that serves files from the assets folder, what will be the HTTP status and response body if a client requests /missing.png which does not exist?

Deno

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

serve(async (req) => {
  const url = new URL(req.url);
  try {
    return await serveFile(req, `./assets${url.pathname}`);
  } catch (error) {
    if (error instanceof Deno.errors.NotFound) {
      return new Response("File not found", { status: 404 });
    }
    return new Response("Internal Server Error", { status: 500 });
  }
});

A Status 200 with empty body.

B Status 500 with body 'Internal Server Error'.

C Status 404 with body 'File not found'.

D Status 404 with empty body.

💡 Hint

Check how the code handles Deno.errors.NotFound exceptions.

When serveFile throws a NotFound error, the catch block returns a 404 response with the body 'File not found'.

Practice

1. What is the main purpose of serving static files in a Deno web server?

easy

A. To send images, styles, and scripts to the user's browser

B. To execute server-side scripts dynamically

C. To connect to a database and fetch data

D. To compile TypeScript files on the server

Solution

1. Step 1: Understand what static files are

   Static files include images, CSS stylesheets, and JavaScript files that do not change dynamically.

2. Step 2: Identify the purpose of serving static files

   Serving static files means sending these files from the server to the user's browser so the webpage looks and works correctly.

3. Final Answer:

   To send images, styles, and scripts to the user's browser -> Option A

4. Quick Check:

   Static files = images, styles, scripts [OK]

Hint: Static files are fixed resources sent to browsers [OK]

Common Mistakes:

• Confusing static files with dynamic server code
• Thinking static files run on the server
• Mixing static files with database operations

2. Which of the following is the correct way to import the function to serve static files in Deno?

easy

A. import { serveFile } from "https://deno.land/std/fs/mod.ts";

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

C. import { serveFile } from "https://deno.land/std/http/file.ts";

D. import { serveFile } from "https://deno.land/std/http/file_server.ts";

Solution

1. Step 1: Identify the correct module for serving static files

   The function serveFile is provided by the file.ts module in Deno's standard HTTP library.

2. Step 2: Match the import path

   The correct import path is "https://deno.land/std/http/file.ts" for serveFile.

3. Final Answer:

   import { serveFile } from "https://deno.land/std/http/file.ts"; -> Option C

4. Quick Check:

   serveFile import = file.ts [OK]

Hint: serveFile comes from file.ts in std/http [OK]

Common Mistakes:

• Using server.ts instead of file.ts
• Importing from fs module incorrectly
• Wrong URL path for the import

3. Given this Deno server code snippet, what will be the response when a user requests /image.png?

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

serve(async (req) => {
  const url = new URL(req.url);
  if (url.pathname === "/image.png") {
    return await serveFile(req, "./static/image.png");
  }
  return new Response("Not Found", { status: 404 });
});

medium

A. The server throws a runtime error because serveFile is used incorrectly

B. The server sends the file located at ./static/image.png to the user

C. The server returns a 404 Not Found response

D. The server sends an empty response with status 200

Solution

1. Step 1: Check the URL path condition

   The code checks if the requested path is exactly "/image.png".

2. Step 2: Understand serveFile usage

   If the path matches, serveFile sends the file "./static/image.png" as the response.

3. Final Answer:

   The server sends the file located at ./static/image.png to the user -> Option B

4. Quick Check:

   Path matches "/image.png" so serveFile sends file [OK]

Hint: Check URL path then serveFile sends matching file [OK]

Common Mistakes:

• Assuming 404 is returned for existing path
• Thinking serveFile causes error here
• Ignoring the URL pathname check

4. Identify the error in this Deno code snippet for serving a static CSS file:

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

serve(async (req) => {
  const url = new URL(req.url);
  if (url.pathname = "/style.css") {
    return await serveFile(req, "./static/style.css");
  }
  return new Response("Not Found", { status: 404 });
});

medium

A. The server function is not awaited

B. serveFile is missing an await keyword

C. The import path for serveFile is incorrect

D. The assignment operator (=) is used instead of comparison (===) in the if condition

Solution

1. Step 1: Check the if condition syntax

   The condition uses a single equals sign (=), which assigns instead of compares.

2. Step 2: Understand the impact of assignment in if

   Using = in if always evaluates to true, causing incorrect logic and possible bugs.

3. Final Answer:

   The assignment operator (=) is used instead of comparison (===) in the if condition -> Option D

4. Quick Check:

   Use === for comparison, not = [OK]

Hint: Use === for comparison, not = assignment in conditions [OK]

Common Mistakes:

• Confusing = with === in if statements
• Forgetting to await serveFile (though it is awaited here)
• Incorrect import paths

5. You want to serve multiple static files (HTML, CSS, JS) from a folder named public in Deno. Which approach correctly serves any requested file from that folder, falling back to a 404 if the file doesn't exist?

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

serve(async (req) => {
  const url = new URL(req.url);
  try {
    // Which line correctly serves the file?
    return await ???;
  } catch {
    return new Response("Not Found", { status: 404 });
  }
});

hard

A. serveFile(req, `./public${url.pathname}`)

B. serveFile(req, `./public/index.html`)

C. serveFile(req, `./public/style.css`)

D. serveFile(req, `./public/${url.searchParams.get('file')}`)

Solution

1. Step 1: Understand dynamic file serving

   To serve any file requested, the server must use the URL path to build the file path inside the public folder.

2. Step 2: Match the URL pathname to the file path

   Using `./public${url.pathname}` correctly maps the request path to the file location.

3. Final Answer:

   serveFile(req, `./public${url.pathname}`) -> Option A

4. Quick Check:

   Dynamic path = ./public + url.pathname [OK]

Hint: Use url.pathname appended to folder path for dynamic files [OK]

Common Mistakes:

• Serving only a fixed file like index.html
• Using query parameters instead of pathname
• Hardcoding a single file path