Serving from multiple directories in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when serving static files from two directories?

Consider this Express setup serving static files from two directories:

const express = require('express');
const app = express();

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

app.listen(3000);

If both public and assets folders contain a file named logo.png, which file will be served when requesting /logo.png?

Express

const express = require('express');
const app = express();

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

app.listen(3000);

A The logo.png file from the 'public' directory is served.

B The logo.png file from the 'assets' directory is served.

C An error occurs because of duplicate files.

D The server randomly picks one of the two files to serve.

💡 Hint

Think about the order in which middleware is applied in Express.

Express checks middleware in the order they are added. Since express.static('public') is added first, it serves files from 'public' before checking 'assets'. So the 'public' version of logo.png is served.

📝 Syntax

intermediate

Which code correctly serves static files from multiple directories?

Choose the correct Express code snippet that serves static files from both 'public' and 'uploads' directories.

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

B

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

C app.use([express.static('public'), express.static('uploads')]);

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

💡 Hint

Remember how app.use accepts middleware functions.

Each call to app.use adds one middleware. Option B correctly adds two separate static middlewares. Options A and B are invalid because express.static expects a string, not multiple arguments or arrays. Option B passes an array, which app.use does not accept as middleware.

🔧 Debug

advanced

Why does this Express app fail to serve files from the second directory?

Look at this Express code:

const express = require('express');
const app = express();

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

app.listen(3000);

Requesting /uploads/image.png returns 404, but /image.png from 'public' works. Why?

Express

const express = require('express');
const app = express();

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

app.listen(3000);

A The static middleware for 'uploads' is incorrectly mounted and should be before 'public'.

B The 'uploads' directory does not exist, causing 404 errors.

C The URL path must include '/uploads' prefix to access files in 'uploads' directory.

D Express cannot serve static files from multiple directories with different URL prefixes.

💡 Hint

Check how the URL path relates to the mount path in app.use.

The second static middleware is mounted at '/uploads', so files inside 'uploads' directory are served only when the URL starts with '/uploads'. Requesting '/uploads/image.png' is correct. Requesting '/image.png' looks only in 'public'. If '/uploads/image.png' returns 404, likely the file is missing or the URL is incorrect.

🧠 Conceptual

advanced

How does Express handle overlapping files in multiple static directories?

If two static middlewares serve files from different directories and both contain a file named index.html, which file will Express serve when requesting /index.html?

A Express serves the file from the last static middleware added.

B Express merges the two files and serves a combined version.

C Express throws an error due to file name conflict.

D Express serves the file from the first static middleware added that contains the file.

💡 Hint

Think about middleware order and how Express processes requests.

Express processes middleware in the order they are added. The first static middleware that finds the requested file serves it. It does not merge files or throw errors for duplicates.

❓ state_output

expert

What is the console output after these requests?

Given this Express app:

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log('Middleware 1');
  next();
});

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

app.use((req, res, next) => {
  console.log('Middleware 2');
  next();
});

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

app.listen(3000);

If a request is made for /style.css which exists only in the 'assets' directory, what will be printed in the console?

Express

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log('Middleware 1');
  next();
});

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

app.use((req, res, next) => {
  console.log('Middleware 2');
  next();
});

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

app.listen(3000);

A

Middleware 1
Middleware 2

B Middleware 1

C

Middleware 1
Middleware 2
Middleware 2

D

Middleware 1
Middleware 2
Middleware 1

💡 Hint

Consider how Express moves through middleware and when it stops.

Request passes Middleware 1, then tries to serve from 'public' but file not found, so next middleware runs (Middleware 2), then 'assets' static serves the file. Middleware 2 runs once. So console logs 'Middleware 1' then 'Middleware 2'.