Serving static files in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output when accessing a static file?

Given the following Node.js Express server code, what will be the HTTP status code when requesting /images/logo.png if the file exists in the public/images folder?

Node.js

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

A 301

B 404

C 500

D 200

💡 Hint

Static middleware serves files from the folder specified.

The express.static middleware serves files from the 'public' folder. If the file exists, the server responds with status 200.

❓ component_behavior

intermediate

How does express.static handle directory requests?

If a user requests /docs/ and the public/docs/index.html file exists, what will express.static serve?

Node.js

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

A It lists all files inside <code>public/docs</code> as a directory listing.

B It returns a 404 error because directories are not served.

C It serves the <code>index.html</code> file inside <code>public/docs</code>.

D It redirects to <code>/docs/index.html</code> URL.

💡 Hint

Express static middleware automatically serves index.html files in directories.

By default, express.static serves the index.html file inside the requested directory if it exists.

📝 Syntax

advanced

Which option correctly sets a custom static folder with a URL prefix?

You want to serve static files from the assets folder but only when the URL starts with /static. Which code snippet is correct?

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

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

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

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

💡 Hint

The first argument to app.use is the URL prefix, the second is the middleware.

The correct syntax is app.use('/static', express.static('assets')) to serve files from 'assets' folder under '/static' URL path.

🔧 Debug

advanced

Why does this static file request return 404?

Consider this code:

import express from 'express';
const app = express();
app.use(express.static('./public'));
app.listen(3000);

Requesting /style.css returns 404, but the file public/style.css exists. What is the likely cause?

Node.js

import express from 'express';
const app = express();
app.use(express.static('./public'));
app.listen(3000);

A The file permissions on style.css prevent it from being served.

B The relative path './public' is incorrect; it should be an absolute path or no './'.

C Express static middleware does not serve CSS files by default.

D The server is not listening on port 3000.

💡 Hint

Relative paths can cause issues depending on where the server is started.

Using './public' as a relative path can cause express.static to look in the wrong folder. It is safer to use an absolute path or just 'public'.

🧠 Conceptual

expert

What happens if multiple static middleware serve the same URL path?

If you have these two lines in your Express app:

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

And both folders contain a file named logo.png, which file will be served when requesting /logo.png?

Node.js

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

A The file from the 'public' folder will be served because middleware are checked in order.

B The file from the 'assets' folder will be served because it is the last middleware.

C Express will merge both files and serve a combined response.

D A 500 error will occur due to conflicting static files.

💡 Hint

Middleware order matters in Express.

Express checks middleware in the order they are added. The first static middleware that finds the file serves it, so 'public/logo.png' is served.