Why serving static files matters in Express - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you use express.static middleware?

Consider this Express 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 if public/image.png exists?

Express

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

A The server will send a JSON response with the file name.

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

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

D The server will send the image.png file from the public folder to the user.

💡 Hint

Think about what express.static middleware does with files in the folder you specify.

express.static middleware serves files from the specified folder directly when the URL matches a file path inside it. So if image.png is inside public, it will be sent to the user.

🧠 Conceptual

intermediate

Why serve static files in a web app?

Why is it important to serve static files like images, CSS, and JavaScript separately in an Express app?

A Because static files contain server secrets and must be hidden.

B Because static files are needed by browsers to display and style pages properly.

C Because static files slow down the server and should be avoided.

D Because static files are only used for backend logic.

💡 Hint

Think about what browsers need to show a webpage correctly.

Static files like images, CSS, and JavaScript are essential for the browser to render the page with styles, interactivity, and visuals. Serving them properly ensures the user sees the page as intended.

📝 Syntax

advanced

Identify the correct way to serve static files in Express

Which of the following code snippets correctly serves static files from a folder named 'assets'?

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

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

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

D app.static('assets');

💡 Hint

Check the Express documentation for the static middleware usage.

The correct syntax is app.use(express.static('folderName')). Option A uses this correctly. Option A tries to use app.get which is incorrect for static middleware. Options A and C have syntax errors.

🔧 Debug

advanced

Why does this static file request fail?

Given this Express code:

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

What URL should a user visit to access public/style.css? What happens if they visit /style.css instead?

A Visit /style.css to get the file; visiting /static/style.css returns 404.

B Both /style.css and /static/style.css serve the file.

C Visit /static/style.css to get the file; visiting /style.css returns 404.

D Neither URL serves the file; static files are disabled.

💡 Hint

Look at the path prefix used in app.use for static files.

The static middleware is mounted at /static, so files inside 'public' are served under /static. Visiting /style.css does not match the static middleware and returns 404.

❓ state_output

expert

What is the output when serving static files with cache control?

Consider this Express code:

app.use(express.static('public', { maxAge: '1d' }));

If a user requests /logo.png, what HTTP header related to caching will the server send?

A Cache-Control: public, max-age=86400

B Cache-Control: no-cache

C Expires: 0

D Content-Type: image/png

💡 Hint

maxAge sets how long browsers can cache the file in seconds.

Setting maxAge to '1d' tells Express to send Cache-Control header with max-age of 86400 seconds (1 day), allowing browsers to cache the file for that time.