express.static middleware - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does express.static middleware do in this code?

Consider this Express.js code snippet:

const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000);

What will happen when a user visits http://localhost:3000/image.png assuming public/image.png exists?

Express

const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000);

A The server will return a 404 error because no route is defined for '/image.png'.

B The server will send the file 'public/image.png' to the user.

C The server will redirect the user to '/public/image.png'.

D The server will respond with a JSON listing of files in the 'public' folder.

💡 Hint

Think about what express.static middleware does with file paths matching the URL.

The express.static middleware serves static files from the specified folder. When the URL matches a file in 'public', it sends that file directly.

📝 Syntax

intermediate

Which option correctly uses express.static to serve files from 'assets' folder?

Choose the correct way to use express.static middleware to serve files from a folder named 'assets'.

A app.use(express.static('assets'));

B app.use(express.static('/assets'));

C app.use(express.static('./assets'));

D app.use(express.static('assets/'));

💡 Hint

Consider how express.static expects the folder path relative to the project root.

The argument to express.static is a string path relative to the current working directory. 'assets' is correct. Adding slashes or dots can cause errors or unexpected behavior.

🔧 Debug

advanced

Why does this express.static middleware not serve files as expected?

Look at this code:

const express = require('express');
const app = express();
app.use('/static', express.static('public'));
app.listen(3000);

When visiting http://localhost:3000/image.png, the file does not load. Why?

A Because the URL must start with '/static' to serve files from 'public'.

B Because the folder 'public' does not exist.

C Because the server is not listening on port 3000.

D Because express.static cannot be used with a path prefix.

💡 Hint

Check the URL path and the mount path of the middleware.

When express.static is mounted at '/static', files inside 'public' are served only when the URL starts with '/static'. So /image.png won't work, but /static/image.png will.

❓ state_output

advanced

What is the output when accessing a missing file with express.static?

Given this Express app:

const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(3000);

What happens when a user requests http://localhost:3000/missing.txt if missing.txt does not exist in 'public'?

A The server redirects to the root URL '/'.

B The server responds with a 500 Internal Server Error.

C The server responds with an empty 200 OK response.

D The server responds with a 404 Not Found error.

💡 Hint

Think about how express.static handles requests for files that are not found.

If the requested file is not found, express.static automatically sends a 404 Not Found response.

🧠 Conceptual

expert

How does express.static middleware affect the request lifecycle in Express?

Which statement best describes how express.static middleware interacts with other middleware and routes in an Express app?

A express.static modifies the request object to include file metadata but does not send responses.

B express.static only works if placed after all route handlers in the middleware stack.

C express.static handles matching requests and ends the response, preventing later middleware or routes from running for those requests.

D express.static always passes control to the next middleware regardless of whether it serves a file.

💡 Hint

Consider what happens when express.static finds a matching file to serve.

When express.static finds a file matching the request URL, it sends the file and ends the response. This means no later middleware or routes run for that request.

Practice

1. What is the main purpose of express.static middleware in an Express app?

easy

A. To handle database connections automatically

B. To manage user authentication and sessions

C. To parse JSON data from incoming requests

D. To serve static files like images, CSS, and JavaScript directly to clients

Solution

1. Step 1: Understand what static files are

   Static files are files like images, CSS, and JavaScript that do not change dynamically and need to be sent as-is to the client.

2. Step 2: Role of express.static

   The express.static middleware serves these files directly from a folder, making them accessible via URLs.

3. Final Answer:

   To serve static files like images, CSS, and JavaScript directly to clients -> Option D

4. Quick Check:

   express.static serves static files = B [OK]

Hint: express.static serves files like images and CSS [OK]

Common Mistakes:

• Thinking it handles database or authentication
• Confusing it with body parsing middleware
• Assuming it runs server-side logic

2. Which of the following is the correct way to use express.static to serve files from a folder named public?

easy

A. app.use.static(express('public'))

B. app.static('public')

C. app.use(express.static('public'))

D. express.use.static('public')

Solution

1. Step 1: Recall the syntax for middleware usage

   Middleware in Express is added using app.use() with the middleware function inside.

2. Step 2: Correct usage of express.static

   The express.static function takes the folder name as a string and returns middleware, so app.use(express.static('public')) is correct.

3. Final Answer:

   app.use(express.static('public')) -> Option C

4. Quick Check:

   Use app.use with express.static('folder') = D [OK]

Hint: Use app.use(express.static('folder')) to serve static files [OK]

Common Mistakes:

• Calling express.static incorrectly
• Using app.static instead of app.use
• Passing wrong arguments or chaining wrongly

3. Given this Express code snippet:

app.use('/assets', express.static('public'));

// Client requests: GET /assets/image.png

Which file path will Express try to serve?

medium

A. public/image.png

B. public/assets/image.png

C. assets/public/image.png

D. image.png

Solution

1. Step 1: Understand the URL prefix in app.use

   The URL path '/assets' is the prefix that maps to the 'public' folder.

2. Step 2: Map the requested URL to the file system

   The request is for '/assets/image.png', so Express removes '/assets' and looks for 'image.png' inside 'public'.

3. Final Answer:

   public/image.png -> Option A

4. Quick Check:

   URL prefix removed, file served from folder = A [OK]

Hint: URL prefix is removed before looking in folder [OK]

Common Mistakes:

• Thinking prefix is part of folder path
• Confusing URL path with file system path
• Assuming files are nested under prefix folder

4. What is wrong with this Express code snippet?

app.use(express.static('public'));
app.use('/static', express.static('public'));

When a client requests /static/style.css, what happens?

medium

A. The server crashes due to middleware conflict

B. The file is served correctly from public/style.css

C. The request results in 404 Not Found error

D. The file is served from public/static/style.css

Solution

1. Step 1: Analyze middleware order and paths

   The first middleware serves files from root URL, the second serves files under '/static' URL prefix.

2. Step 2: Understand request mapping for /static/style.css

   The second middleware matches '/static/style.css', removes '/static', and serves 'style.css' from 'public'.

3. Final Answer:

   The file is served correctly from public/style.css -> Option B

4. Quick Check:

   Multiple static middlewares can serve different URL prefixes = C [OK]

Hint: Multiple static middlewares can coexist with different URL prefixes [OK]

Common Mistakes:

• Assuming middleware conflicts cause crashes
• Thinking 404 occurs due to multiple static uses
• Confusing URL path with folder structure

5. You want to serve static files from two folders: public at root URL and uploads at /files. Which code correctly sets this up?

hard

A. app.use(express.static('public'));
app.use('/files', express.static('uploads'));

B. app.use('/files', express.static('public'));
app.use(express.static('uploads'));

C. app.use(express.static('uploads'));
app.use('/files', express.static('public'));

D. app.use('/public', express.static('public'));
app.use('/uploads', express.static('uploads'));

Solution

1. Step 1: Map 'public' folder to root URL

   Using app.use(express.static('public')) serves files from 'public' at root URL.

2. Step 2: Map 'uploads' folder to '/files' URL prefix

   Using app.use('/files', express.static('uploads')) serves files from 'uploads' folder under '/files' URL.

3. Final Answer:

   app.use(express.static('public')); app.use('/files', express.static('uploads')); -> Option A

4. Quick Check:

   Root and prefixed static folders set correctly = A [OK]

Hint: Root folder no prefix, others use URL prefix in app.use [OK]

Common Mistakes:

• Swapping folder and URL prefix
• Using wrong folder names in middleware
• Assigning prefixes incorrectly