express.static middleware - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is express.static middleware used for in Express?

express.static is used to serve static files like images, CSS, and JavaScript files to clients directly from a folder.

beginner

How do you use express.static to serve files from a folder named public?

You use it like this: app.use(express.static('public'));. This tells Express to serve files from the public folder.

intermediate

Can you explain what happens when a client requests /images/logo.png and you have app.use(express.static('public'));?

Express looks inside the public folder for images/logo.png. If it finds the file, it sends it back to the client as a static file.

intermediate

What is the benefit of using express.static middleware instead of manually sending files?

It simplifies serving files, handles caching headers automatically, and improves performance by letting Express manage static content efficiently.

intermediate

How can you serve static files from a virtual path prefix like /static?

You can add a path prefix like this: app.use('/static', express.static('public'));. Then files in public are served under /static URL.

What does express.static middleware do?

A Handles database connections

B Serves static files like images and CSS

C Parses JSON request bodies

D Manages user sessions

express.static is specifically for serving static files such as images, CSS, and JavaScript.

How do you serve files from a folder named assets using express.static?

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

B app.static('assets');

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

D express.static('assets');

You use app.use(express.static('assets')); to serve static files from the assets folder.

If you want to serve static files under the URL path /files, which code is correct?

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

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

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

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

Using app.use('/files', express.static('public')); serves files from public folder under the /files URL prefix.

What happens if a requested static file is not found in the folder?

A Express moves to the next middleware or route

B Express crashes

C Express sends a blank response

D Express automatically creates the file

If the file is not found, Express continues to the next middleware or route handler.

Which of these is NOT a benefit of using express.static?

A Automatic caching headers

B Simplifies serving static files

C Manages database queries

D Improves performance for static content

express.static does not manage database queries; it only serves static files.

Explain how to use express.static middleware to serve static files from a folder and why it is useful.

Think about how websites show images and styles without extra code.

Describe how to serve static files under a URL prefix using express.static and what effect this has on the URL paths.

Imagine putting all images under /static in the URL.

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