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.

Practice

1. What is the main purpose of using express.static in a Node.js server?

easy

A. To manage user authentication

B. To handle database connections

C. To create dynamic HTML pages

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

Solution

1. Step 1: Understand the role of express.static

   This middleware is designed to serve files such as images, CSS, and JavaScript directly to the browser.

2. Step 2: Compare with other server tasks

   Database connections, dynamic page creation, and authentication are handled by other parts of the server, not express.static.

3. Final Answer:

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

4. Quick Check:

   Serving static files = A [OK]

Hint: Remember: static files are served by express.static middleware [OK]

Common Mistakes:

• Confusing static file serving with database handling
• Thinking express.static creates dynamic content
• Assuming express.static manages user login

2. Which of the following is the correct syntax to serve static files from a folder named public using Express?

easy

A. app.static('public')

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

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

D. app.getStatic('public')

Solution

1. Step 1: Recall Express static middleware syntax

   The correct way is to call app.use(express.static('folderName')) to serve static files.

2. Step 2: Check each option

   Only app.use(express.static('public')) uses the correct method and syntax. Others are invalid or do not exist in Express.

3. Final Answer:

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

4. Quick Check:

   Correct static serving syntax = B [OK]

Hint: Use app.use with express.static and folder name [OK]

Common Mistakes:

• Using app.static instead of app.use(express.static)
• Calling express.use.static which is invalid
• Trying app.getStatic which does not exist

3. Given this Express code snippet:

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

What URL path would serve the file assets/logo.png?

medium

A. http://localhost:3000/assets/logo.png

B. http://localhost:3000/public/logo.png

C. http://localhost:3000/logo.png

D. http://localhost:3000/static/logo.png

Solution

1. Step 1: Understand express.static path mapping

   When serving static files from folder 'assets', the files are accessible at the root URL path, so 'logo.png' is at '/logo.png'.

2. Step 2: Analyze each URL option

   http://localhost:3000/logo.png matches the correct URL path. Options A, B, and C incorrectly add folder names to the URL path.

3. Final Answer:

   http://localhost:3000/logo.png -> Option C

4. Quick Check:

   Static folder files appear at root URL path = D [OK]

Hint: Static folder files appear at root URL unless a prefix is set [OK]

Common Mistakes:

• Adding folder name to URL path incorrectly
• Assuming static files need /static or /public prefix
• Confusing folder name with URL path

4. Identify the error in this code snippet that tries to serve static files from the static folder:

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

medium

A. Incorrect use of express.static.static instead of express.static

B. Missing app.listen call

C. Folder name should be absolute path

D. Static files folder must be named 'public'

Solution

1. Step 1: Check the express.static usage

   The code incorrectly calls express.static.static. The correct call is express.static.

2. Step 2: Verify other parts

   App.listen is present, folder name can be relative, and folder name does not have to be 'public'.

3. Final Answer:

   Incorrect use of express.static.static instead of express.static -> Option A

4. Quick Check:

   Use express.static, not express.static.static [OK]

Hint: Use express.static, not express.static.static [OK]

Common Mistakes:

• Adding extra .static after express.static
• Thinking folder must be named 'public'
• Believing folder path must be absolute

5. You want to serve static files from the public folder but under the URL path prefix /static. Which code correctly achieves this?

hard

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

B. app.use(express.static('/static/public'))

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

D. app.get('/static', express.static('public'))

Solution

1. Step 1: Understand URL prefix with express.static

   To serve static files under a URL prefix, pass the prefix as the first argument to app.use, then the static middleware.

2. Step 2: Evaluate each option

   app.use('/static', express.static('public')) correctly uses app.use('/static', express.static('public')). Others either misuse paths or methods.

3. Final Answer:

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

4. Quick Check:

   URL prefix with app.use('/prefix', express.static(folder)) = A [OK]

Hint: Use app.use('/prefix', express.static('folder')) for URL prefix [OK]

Common Mistakes:

• Putting URL prefix inside express.static argument
• Using app.get instead of app.use for static files
• Mixing folder and URL prefix names