Built-in middleware (json, urlencoded, static) in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use Express built-in middleware for parsing JSON bodies.

Express

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

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

app.post('/data', (req, res) => {
  res.json(req.body);
});

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

Ajson

Burlencoded

Cstatic

Draw

Attempts:

3 left

💡 Hint

Common Mistakes

Using urlencoded middleware for JSON data

Forgetting to call the middleware as a function

Using static middleware for parsing bodies

The express.json() middleware parses incoming JSON payloads and makes them available under req.body.

2fill in blank

medium

Complete the code to use Express built-in middleware for parsing URL-encoded bodies.

Express

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

app.use(express.[1]({ extended: false }));

app.post('/form', (req, res) => {
  res.send(req.body);
});

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

Atext

Bjson

Cstatic

Durlencoded

Attempts:

3 left

💡 Hint

Common Mistakes

Using json middleware for URL-encoded data

Not passing the options object with extended property

Using static middleware for parsing bodies

The express.urlencoded() middleware parses URL-encoded form data and populates req.body.

3fill in blank

hard

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

Express

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

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

app.listen(3000);

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

Astatic

Burlencoded

Cjson

Draw

Attempts:

3 left

💡 Hint

Common Mistakes

Using json or urlencoded middleware for static files

Forgetting to specify the folder name

Not calling the middleware as a function

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

4fill in blank

hard

Fill both blanks to parse JSON and URL-encoded data in Express.

Express

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

app.use(express.[1]());
app.use(express.[2]({ extended: true }));

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

Ajson

Burlencoded

Cstatic

Draw

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of middleware

Using static middleware instead of parsing middleware

Not passing options to urlencoded middleware

Use express.json() to parse JSON and express.urlencoded() to parse URL-encoded data.

5fill in blank

hard

Fill all three blanks to set up Express with JSON parsing, URL-encoded parsing, and static file serving from 'assets'.

Express

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

app.use(express.[1]());
app.use(express.[2]({ extended: false }));
app.use(express.[3]('assets'));

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

Ajson

Burlencoded

Cstatic

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong middleware for static files

Not passing options to urlencoded middleware

Forgetting to call middleware functions

This setup parses JSON and URL-encoded bodies and serves static files from the 'assets' folder.

Practice

1. Which built-in Express middleware is used to parse incoming JSON request bodies?

easy

A. express.json()

B. express.urlencoded()

C. express.static()

D. express.bodyParser()

Solution

1. Step 1: Understand middleware purpose

   express.json() is designed to parse JSON data sent in request bodies.

2. Step 2: Compare with other middleware

   express.urlencoded() parses URL-encoded form data, express.static() serves files, and express.bodyParser() is not a built-in middleware.

3. Final Answer:

   express.json() -> Option A

4. Quick Check:

   JSON parsing = express.json() [OK]

Hint: JSON data uses express.json() middleware [OK]

Common Mistakes:

• Confusing urlencoded with json middleware
• Using express.static() for parsing data
• Assuming bodyParser is built-in

2. Which of the following is the correct way to use Express middleware to parse URL-encoded form data with support for rich objects and arrays (extended: true)?

easy

A. app.use(express.urlencoded);

B. app.use(express.urlencoded());

C. app.use(express.urlencoded({ extended: true }));

D. app.use(express.urlencoded(true));

Solution

1. Step 1: Recall middleware syntax

   express.urlencoded() is a function that returns middleware and accepts an options object.

2. Step 2: Identify correct usage

   The correct usage includes calling the function with an options object, commonly { extended: true } to support rich objects and arrays.

3. Final Answer:

   app.use(express.urlencoded({ extended: true })); -> Option C

4. Quick Check:

   Call urlencoded() with options object [OK]

Hint: Call express.urlencoded() with options object [OK]

Common Mistakes:

• Forgetting parentheses after express.urlencoded
• Passing boolean directly instead of options object
• Using express.urlencoded without calling it

3. Given the code below, what will be the output when a GET request is made to /public/image.png if the file exists?

const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => res.send('Home'));
app.listen(3000);

medium

A. 404 Not Found error because no route matches /public/image.png.

B. The server will respond with 'Home' text.

C. Syntax error due to missing middleware.

D. The image file image.png will be served from the public folder.

Solution

1. Step 1: Understand express.static middleware

   express.static('public') serves files from the 'public' folder when requested by path.

2. Step 2: Analyze request path

   A GET request to /public/image.png looks for public/public/image.png which does not exist. But since the middleware serves files relative to the folder, the correct URL to access image.png is /image.png.

3. Step 3: Check the actual request path

   Requesting /public/image.png will cause 404 because the middleware serves files at root, not under /public.

4. Final Answer:

   404 Not Found error because no route matches /public/image.png. -> Option A

5. Quick Check:

   express.static serves files at root URL [OK]

Hint: Static files served at root URL, not under folder name [OK]

Common Mistakes:

• Assuming static serves files under /folder path
• Expecting route handler to serve static files
• Confusing middleware path with URL path

4. Identify the error in the following Express setup code:

const express = require('express');
const app = express();
app.use(express.json);
app.use(express.urlencoded({ extended: false }));
app.listen(3000);

medium

A. express.json is not a valid middleware.

B. Missing parentheses after express.json middleware call.

C. Incorrect option passed to express.urlencoded.

D. app.listen should be called before middleware.

Solution

1. Step 1: Check middleware usage syntax

   Middleware functions like express.json() must be called with parentheses to return the middleware function.

2. Step 2: Identify the error

   The code uses express.json without parentheses, so it passes the function itself, not the middleware, causing an error.

3. Final Answer:

   Missing parentheses after express.json middleware call. -> Option B

4. Quick Check:

   Call express.json() with () [OK]

Hint: Always call middleware functions with parentheses [OK]

Common Mistakes:

• Forgetting () after express.json
• Passing wrong options to urlencoded
• Calling app.listen before middleware

5. You want to serve static files from the folder named assets under the URL path /static. Which Express middleware setup achieves this correctly?

hard

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

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

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

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

Solution

1. Step 1: Understand express.static usage with mount path

   To serve files from a folder under a specific URL path, use app.use('/urlpath', express.static('folder')).

2. Step 2: Match folder and URL path

   Here, the folder is assets and the URL path is /static, so app.use('/static', express.static('assets')) is correct.

3. Step 3: Analyze incorrect options

   Other options either swap folder and path or use incorrect paths causing errors or wrong URLs.

4. Final Answer:

   app.use('/static', express.static('assets')); -> Option D

5. Quick Check:

   Mount static folder on desired URL path [OK]

Hint: Mount static folder with URL path as first argument [OK]

Common Mistakes:

• Swapping folder and URL path arguments
• Using absolute paths incorrectly
• Not specifying URL path for static files