Why serving static files matters in Express - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to serve static files from the 'public' folder using Express.

Express

app.use(express.[1]('public'));

Drag options to blanks, or click blank then click option'

Arouter

Bjson

Cstatic

Durlencoded

Attempts:

3 left

💡 Hint

Common Mistakes

Using express.json() instead of express.static()

Forgetting to specify the folder name

Using app.router which is for routes, not static files

The express.static middleware serves static files like images, CSS, and JavaScript from a folder.

2fill in blank

medium

Complete the code to set up Express to serve static files from a folder named 'assets'.

Express

app.use(express.static('[1]'));

Drag options to blanks, or click blank then click option'

Aassets

Bstatic

Cpublic

Dfiles

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name like 'public' when files are in 'assets'

Leaving the folder name empty

Using a file name instead of a folder name

The folder name passed to express.static is where your static files live. Here, it's 'assets'.

3fill in blank

hard

Fix the error in the code to correctly serve static files from the 'static' folder.

Express

app.use(express.[1]('static'));

Drag options to blanks, or click blank then click option'

Astatic

Brouter

Cjson

Durlencoded

Attempts:

3 left

💡 Hint

Common Mistakes

Using express.router which is for routing, not static files

Using express.json which parses JSON bodies

Using express.urlencoded which parses URL-encoded bodies

The correct middleware to serve static files is express.static. Using others causes errors or wrong behavior.

4fill in blank

hard

Fill both blanks to serve static files from 'public' folder and mount it at '/static' URL path.

Express

app.use('[1]', express.[2]('public'));

Drag options to blanks, or click blank then click option'

A/static

B/public

Cstatic

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/public' as the URL path when the question asks for '/static'

Using 'router' instead of 'static' middleware

Omitting the URL path and mounting directly

Mounting static files at '/static' means URLs start with '/static'. The middleware is express.static.

5fill in blank

hard

Fill all three blanks to create a static server with Express that serves files from 'assets' folder at '/files' URL path and logs a message when server starts.

Express

app.use('[1]', express.[2]('[3]'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Drag options to blanks, or click blank then click option'

A/files

Bassets

Cstatic

D/assets

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up URL path and folder name

Using 'router' instead of 'static' middleware

Not matching folder name with actual static files location

To serve static files from 'assets' at '/files', use app.use('/files', express.static('assets')). The server logs a message on start.

Practice

1. Why do we use express.static middleware in an Express app?

easy

A. To handle database connections automatically

B. To serve static files like images, CSS, and JavaScript to the browser

C. To create dynamic routes based on user input

D. To log all incoming requests to the console

Solution

1. Step 1: Understand the purpose of static files

   Static files include images, CSS, and JavaScript that browsers need to display a webpage properly.

2. Step 2: Role of express.static

   This middleware tells Express to serve these files directly from a folder to the browser.

3. Final Answer:

   To serve static files like images, CSS, and JavaScript to the browser -> Option B

4. Quick Check:

   Serving static files = express.static usage [OK]

Hint: Static files are served with express.static middleware [OK]

Common Mistakes:

• Confusing static files with dynamic content
• Thinking express.static handles database or logging
• Assuming express.static creates routes

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

easy

A. app.getStatic('public')

B. app.static('public')

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

D. app.serveStatic('public')

Solution

1. Step 1: Recall Express static middleware syntax

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

2. Step 2: Check each option

   Only app.use(express.static('public')) uses the correct method express.static with app.use.

3. Final Answer:

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

4. Quick Check:

   Correct syntax = app.use(express.static('folder')) [OK]

Hint: Use app.use with express.static('folder') to serve files [OK]

Common Mistakes:

• Using app.static instead of express.static
• Forgetting to use app.use middleware
• Using non-existent methods like getStatic or serveStatic

3. What will happen if you run this Express code?

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

And you visit http://localhost:3000/image.png where assets/image.png exists?

medium

A. The server will return a 404 Not Found error

B. The browser will download a blank page

C. The server will crash with an error

D. The image.png file will be served and displayed in the browser

Solution

1. Step 1: Understand express.static behavior

   express.static serves files from the specified folder matching the URL path.

2. Step 2: Match URL to file path

   Visiting /image.png looks for assets/image.png. Since it exists, Express serves it.

3. Final Answer:

   The image.png file will be served and displayed in the browser -> Option D

4. Quick Check:

   File exists + express.static = file served [OK]

Hint: URL path matches static folder files to serve them [OK]

Common Mistakes:

• Assuming 404 if static middleware is used
• Thinking server crashes on static file requests
• Confusing static folder name with URL path

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

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

medium

A. express.static is missing the folder path argument

B. app.listen should come before app.use

C. express.static should be called without parentheses

D. The folder name should be 'public' not 'static'

Solution

1. Step 1: Check express.static usage

   express.static is a function that requires the folder path as an argument.

2. Step 2: Identify missing argument

   The code uses express.static without parentheses and folder name, so it won't work.

3. Final Answer:

   express.static is missing the folder path argument -> Option A

4. Quick Check:

   express.static needs folder path argument [OK]

Hint: express.static must be called with folder path [OK]

Common Mistakes:

• Forgetting to call express.static as a function
• Thinking app.listen order matters here
• Assuming folder name must be 'public'

5. You want to serve static files from two folders: public and uploads. Which code correctly serves both folders so files from either can be accessed by URL?

hard

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

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

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

D. app.static('public');
app.static('uploads');

Solution

1. Step 1: Understand serving multiple static folders

   Express allows multiple static folders by calling app.use(express.static()) multiple times.

2. Step 2: Evaluate options

   app.use(express.static('public')); app.use(express.static('uploads')); correctly calls express.static twice for each folder. app.use(express.static(['public', 'uploads'])); is invalid syntax. app.use(express.static('public/uploads')); tries to serve a combined folder that likely doesn't exist. app.static('public'); app.static('uploads'); uses a wrong method.

3. Final Answer:

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

4. Quick Check:

   Multiple app.use(express.static()) calls serve multiple folders [OK]

Hint: Call app.use(express.static()) for each folder separately [OK]

Common Mistakes:

• Trying to pass an array to express.static
• Combining folder names incorrectly
• Using non-existent app.static method