Serving static files in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the static file server from Deno's standard library.

Deno

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

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

Ahttps://deno.land/std/http/server.ts

Bhttps://deno.land/std/http/file_server.ts

Chttps://deno.land/std/fs/mod.ts

Dhttps://deno.land/std/http/file.ts

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from the wrong module like server.ts or fs/mod.ts

Using an incorrect URL that does not exist

The serveFile function is imported from file_server.ts to serve static files.

2fill in blank

medium

Complete the code to create a basic HTTP server that listens on port 8000.

Deno

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

const server = serve({ port: [1] });
console.log("HTTP server running on http://localhost:8000/");

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

A8080

B80

C3000

D8000

Attempts:

3 left

💡 Hint

Common Mistakes

Using port 8080 or 3000 which are common but don't match the log

Using port 80 which requires elevated permissions

Port 8000 is commonly used for local development servers and matches the console log message.

3fill in blank

hard

Fix the error in the request handler to serve the requested file correctly.

Deno

for await (const req of server) {
  const response = await serveFile(req, new URL(`./public${new URL([1]).pathname}`, import.meta.url));
  req.respondWith(response);
}

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

Areq.request.url

Breq.path

Creq.url

Dreq.request.path

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.url which does not exist

Using req.path which does not exist

Using req.request.path which does not exist

The req.request.url property contains the full URL. The pathname is extracted to construct the static file path.

4fill in blank

hard

Fill both blanks to correctly handle errors when serving static files.

Deno

for await (const req of server) {
  try {
    const response = await serveFile(req, new URL(`./public${new URL([1]).pathname}`, import.meta.url));
    req.respondWith(response);
  } catch ([2]) {
    req.respondWith({ status: 404, body: "File not found" });
  }
}

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

Areq.request.url

Berror

Ce

Derr

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names in catch block

Not using req.request.url to get the file path

Use req.request.url to get the full URL path and error as the catch variable to handle exceptions.

5fill in blank

hard

Fill all three blanks to create a complete static file server that listens on port 9000 and serves files from the 'static' folder.

Deno

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

const server = serve({ port: [1] });
console.log("Server running on http://localhost:9000/");

for await (const req of server) {
  try {
    const response = await serveFile(req, new URL(`./[2]$[3]${new URL(req.request.url).pathname}`, import.meta.url));
    req.respondWith(response);
  } catch (error) {
    req.respondWith({ status: 404, body: "Not Found" });
  }
}

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

A9000

B/index.html

Cstatic

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong port number

Not adding '/' before the requested file path

Using incorrect folder name

The server listens on port 9000, serves files from the 'static' folder, prepends '/' before the pathname extracted from req.request.url.

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