Serving from multiple directories in Express - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of serving static files from multiple directories in Express?

It allows your web server to deliver files like images, CSS, and JavaScript from different folders, making it easier to organize and manage resources.

beginner

How do you serve static files from multiple directories in Express?

You use multiple calls to express.static middleware, each pointing to a different folder, and add them to your app with app.use().

intermediate

What happens if two static directories contain files with the same name?

Express serves the file from the first directory that matches the request path, ignoring the others for that file name.

beginner

Show a simple example code snippet to serve static files from 'public' and 'assets' folders in Express.

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

beginner

Why is it important to serve static files efficiently in a web app?

Serving static files efficiently improves page load speed and user experience by quickly delivering images, styles, and scripts without extra processing.

Which Express method is used to serve static files from a directory?

A app.get()

B express.static()

C app.listen()

D express.use()

express.static() is the middleware function used to serve static files.

How do you add multiple static directories in Express?

A Use app.static() instead of express.static()

B Pass an array of directories to one express.static() call

C Serve only one directory at a time

D Call app.use() multiple times with express.static() for each directory

You add multiple static directories by calling app.use() multiple times with express.static() for each folder.

If two static directories have a file named 'logo.png', which one will Express serve?

A Both files at the same time

B The file from the directory added last with app.use()

C The file from the directory added first with app.use()

D Express will throw an error

Express serves the first matching file it finds based on the order of app.use() calls.

What is a benefit of organizing static files into multiple directories?

A Better organization and easier maintenance

B Slower server response

C More complex code with no benefits

D It disables caching

Using multiple directories helps keep files organized and easier to manage.

Which of these is NOT a static file typically served by Express?

A Database queries

B HTML files

C JavaScript files

D CSS files

Database queries are dynamic operations, not static files.

Explain how to serve static files from two different folders in Express and what happens if files have the same name.

Think about middleware order and file lookup.

Describe why serving static files efficiently matters in a web application and how multiple directories can help.

Consider user experience and code organization.

Practice

1. What happens when you use multiple app.use(express.static()) calls with different directories in Express?

easy

A. Express throws an error if multiple static directories are used.

B. Express merges all directories into one and serves files randomly from any directory.

C. Express only serves files from the last directory added with express.static().

D. Express serves static files by checking each directory in the order they were added until it finds the file.

Solution

1. Step 1: Understand how Express static middleware works

   Each app.use(express.static()) adds a middleware that checks its directory for requested files.

2. Step 2: Order of middleware matters

   Express checks these middlewares in the order they were added and serves the first matching file it finds.

3. Final Answer:

   Express serves static files by checking each directory in the order they were added until it finds the file. -> Option D

4. Quick Check:

   Multiple static folders checked in order = D [OK]

Hint: Remember: Express checks static folders in order added [OK]

Common Mistakes:

• Thinking Express merges directories randomly
• Believing only the last directory is used
• Assuming multiple static folders cause errors

2. Which of the following is the correct way to serve static files from two directories named public and assets in Express?

easy

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

B. app.use(express.static(['public', 'assets']));

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

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

Solution

1. Step 1: Check Express static syntax

   The express.static() middleware accepts only one directory path at a time.

2. Step 2: Use multiple app.use() calls

   To serve multiple directories, call app.use(express.static()) separately for each directory.

3. Final Answer:

   app.use(express.static('public')); app.use(express.static('assets')); -> Option A

4. Quick Check:

   Multiple static folders need separate app.use calls = C [OK]

Hint: Use separate app.use calls for each static folder [OK]

Common Mistakes:

• Passing multiple directories in one express.static call
• Using incorrect method like app.use.static
• Passing an array instead of separate calls

3. Given the code below, what file will Express serve when a user requests /image.png? Assume both directories contain a file named image.png.

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

medium

A. The image.png from the public directory.

B. The image.png from the assets directory.

C. An error because the file exists in both directories.

D. No file will be served; Express will return 404.

Solution

1. Step 1: Understand middleware order

   Express checks static directories in the order they are added. Here, public is checked first.

2. Step 2: First match is served

   Since image.png exists in public, Express serves that file and stops checking further.

3. Final Answer:

   The image.png from the public directory. -> Option A

4. Quick Check:

   First matching static file served = A [OK]

Hint: Express serves first found file in order of static folders [OK]

Common Mistakes:

• Assuming Express merges files from both directories
• Thinking Express throws error on duplicates
• Believing the last directory has priority

4. Identify the error in the following Express code that tries to serve static files from two directories:

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

medium

A. The first line should use app.get instead of app.use.

B. The second line has a syntax error with missing parentheses and argument.

C. Express cannot serve from more than one directory.

D. The third line should come before the first line.

Solution

1. Step 1: Check each line for syntax correctness

   The second line is app.use(express.static)); which is missing parentheses and directory argument.

2. Step 2: Understand correct usage of express.static

   The express.static() function requires a directory path as an argument and proper parentheses.

3. Final Answer:

   The second line has a syntax error with missing parentheses and argument. -> Option B

4. Quick Check:

   Syntax error in express.static call = B [OK]

Hint: Check parentheses and arguments in express.static calls [OK]

Common Mistakes:

• Ignoring missing parentheses or arguments
• Thinking app.use is wrong for static files
• Believing order of calls causes syntax error

5. You want to serve static files from public and uploads directories, but only files in uploads should be accessible under the URL path /files. How do you configure Express correctly?

hard

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

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

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

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

Solution

1. Step 1: Serve public directory normally

   Use app.use(express.static('public')) to serve files at root URL.

2. Step 2: Mount uploads directory under /files path

   Use app.use('/files', express.static('uploads')) so files in uploads are accessible under /files URL prefix.

3. Final Answer:

   app.use(express.static('public')); app.use('/files', express.static('uploads')); -> Option C

4. Quick Check:

   Use URL prefix for uploads folder = A [OK]

Hint: Use URL path prefix in app.use for selective static serving [OK]

Common Mistakes:

• Serving uploads without URL prefix
• Using wrong directory paths
• Confusing URL path with filesystem path