Serving static files in Deno - Step-by-Step Execution

Concept Flow - Serving static files

Start Server

↓

Receive HTTP Request

↓

Check Request URL

↓

Locate File

↓

Read File from Disk

↓

Send File Content as Response

↓

Wait for Next Request

The server starts and waits for requests. When a request comes, it checks if the URL matches the static files path. If yes, it reads the file and sends it back. Otherwise, it returns a 404 error.

Execution Sample

Deno

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

serve(async (req) => {
  const url = new URL(req.url);
  if (url.pathname.startsWith('/static/')) {
    try {
      const filePath = '.' + url.pathname;
      const file = await Deno.readFile(filePath);
      return new Response(file);
    } catch {
      return new Response('File not found', { status: 404 });
    }
  }
  return new Response('Not Found', { status: 404 });
});

This code starts a Deno server that listens for requests. If the URL path starts with '/static/', it tries to read the file from disk and returns it. If the file is missing, it returns 404.

Execution Table

Step	Request URL	Check Pathname	File Path	File Read Result	Response Sent
1	http://localhost:8000/static/image.png	Starts with /static/	./static/image.png	File found and read	File content with status 200
2	http://localhost:8000/static/missing.txt	Starts with /static/	./static/missing.txt	File not found (error)	Text 'File not found' with status 404
3	http://localhost:8000/api/data	Does not start with /static/	-	-	Text 'Not Found' with status 404

💡 Server waits for next request after sending response.

Variable Tracker

Variable	Start	After 1	After 2	After 3
url.pathname	-	/static/image.png	/static/missing.txt	/api/data
filePath	-	./static/image.png	./static/missing.txt	-
file	-	File content bytes	Error thrown	-

Key Moments - 2 Insights

Why does the server return 404 even if the URL starts with /static/?

Because the file does not exist on disk, so reading it throws an error caught in the try-catch block, leading to a 404 response as shown in execution_table row 2.

What happens if the URL does not start with /static/?

The server skips file reading and directly returns a 404 'Not Found' response, as shown in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the response when requesting '/static/image.png'?

A Text 'File not found' with status 404

B File content with status 200

C Text 'Not Found' with status 404

D Empty response with status 500

💡 Hint

Check execution_table row 1 under 'Response Sent'

At which step does the server return 'Text "File not found" with status 404'?

A Step 3

B Step 1

C Step 2

D Never

💡 Hint

Look at execution_table row 2 under 'Response Sent'

If the URL path changes to '/assets/image.png', what will the server respond?

A Text 'Not Found' with status 404

B Text 'File not found' with status 404

C File content with status 200

D Server error

💡 Hint

Check how the server handles paths not starting with '/static/' in execution_table row 3

Concept Snapshot

Serving static files in Deno:
- Use serve() to start server
- Check if request URL starts with '/static/'
- If yes, read file from disk
- Return file content or 404 if missing
- Else return 404 for other paths

Full Transcript

This example shows how a Deno server serves static files. When a request comes in, the server checks if the URL path starts with '/static/'. If it does, the server tries to read the file from disk using Deno.readFile. If the file exists, its content is sent back with status 200. If the file does not exist, the server catches the error and returns a 404 response with 'File not found' text. For any other URL paths, the server returns a 404 'Not Found' response. This flow repeats for every incoming request.

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