Third-party middleware installation in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Express package.

Express

const express = require('[1]');

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

Ahttp

Bfs

Cexpress

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'http' instead of 'express' will import the Node.js HTTP module, not Express.

Using 'fs' or 'path' imports file system or path utilities, not Express.

You import the Express package by requiring 'express'. This allows you to use Express features in your app.

2fill in blank

medium

Complete the code to install the 'cors' middleware in the Express app.

Express

const cors = require('[1]');

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

Acors

Bbody-parser

Cmorgan

Dhelmet

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'helmet' imports security middleware, not CORS.

Using 'morgan' imports logging middleware, not CORS.

The 'cors' package is imported by requiring 'cors'. This middleware helps handle Cross-Origin Resource Sharing.

3fill in blank

hard

Fix the error in applying the 'cors' middleware to the Express app.

Express

app.use([1]());

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

Acors.apply

Bcors

Ccors()

Dcors.use

Attempts:

3 left

💡 Hint

Common Mistakes

Putting parentheses inside the blank causes a syntax error.

Using 'cors.apply' or 'cors.use' are not valid middleware references.

When using middleware, you pass the middleware function itself to app.use, not the result of calling it. So use app.use(cors()); is correct, but here the blank is for the middleware function name without parentheses.

4fill in blank

hard

Fill both blanks to import and use the 'helmet' middleware correctly.

Express

const [1] = require('[2]');
app.use(helmet());

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

Ahelmet

Bcors

Dmorgan

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cors' or 'morgan' instead of 'helmet' will import the wrong middleware.

Mismatching variable and package names causes errors.

You import the 'helmet' package by requiring 'helmet' and assign it to a variable named 'helmet'. Then you use it with app.use(helmet());.

5fill in blank

hard

Fill all three blanks to import, configure, and use the 'body-parser' middleware for JSON data.

Express

const [1] = require('[2]');
app.use([3].json());

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

AbodyParser

Bbody-parser

Dcors

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cors' instead of 'body-parser' imports the wrong middleware.

Not calling the .json() method will not parse JSON bodies.

You import the 'body-parser' package by requiring 'body-parser' and assign it to a variable named 'bodyParser'. Then you use app.use(bodyParser.json()); to parse JSON request bodies.

Practice

1. What is the main purpose of third-party middleware in an Express app?

easy

A. To add extra features like parsing or logging easily

B. To replace the Express framework completely

C. To write HTML pages automatically

D. To create a database connection

Solution

1. Step 1: Understand middleware role

   Middleware adds extra functions to Express apps, like parsing data or logging requests.

2. Step 2: Compare options

   Replacing Express or creating databases are not middleware tasks; middleware enhances features.

3. Final Answer:

   To add extra features like parsing or logging easily -> Option A

4. Quick Check:

   Middleware adds features = A [OK]

Hint: Middleware adds features, not replaces core framework [OK]

Common Mistakes:

• Thinking middleware replaces Express
• Confusing middleware with database tools
• Assuming middleware generates HTML pages

2. Which code snippet correctly installs and uses the cors middleware in an Express app?

easy

A. const cors = require('cors'); app.use(cors());

B. import cors from 'cors'; app.use(cors);

C. import cors from 'cors'; app.use(cors());

D. const cors = require('cors'); app.use(cors);

Solution

1. Step 1: Check import style

   Modern Express apps use ES modules, so import cors from 'cors'; is correct.

2. Step 2: Check middleware usage

   Middleware must be called as a function: app.use(cors()); not just cors.

3. Final Answer:

   import cors from 'cors'; app.use(cors()); -> Option C

4. Quick Check:

   Import + call middleware function = C [OK]

Hint: Import middleware and call it with () in app.use [OK]

Common Mistakes:

• Forgetting parentheses after middleware name
• Mixing require and import syntax
• Using app.use(cors) without calling it

3. What will be the output when this Express app code runs and receives a JSON POST request?

import express from 'express';
import bodyParser from 'body-parser';
const app = express();
app.use(bodyParser.json());
app.post('/data', (req, res) => {
  res.send(req.body.name);
});
app.listen(3000);

medium

A. The server responds with an empty string

B. The server responds with '[object Object]'

C. The server crashes with a syntax error

D. The server responds with the value of 'name' from the JSON body

Solution

1. Step 1: Understand bodyParser.json()

   This middleware parses JSON request bodies and sets req.body to the parsed object.

2. Step 2: Check response code

   The route sends back req.body.name, so the response is the 'name' value from JSON.

3. Final Answer:

   The server responds with the value of 'name' from the JSON body -> Option D

4. Quick Check:

   bodyParser parses JSON, response sends req.body.name = B [OK]

Hint: bodyParser.json() parses JSON, so req.body has data [OK]

Common Mistakes:

• Not using bodyParser.json(), so req.body is undefined
• Expecting raw JSON string instead of parsed object
• Sending req.body instead of req.body.name

4. Identify the error in this Express app code using helmet middleware:

import express from 'express';
import helmet from 'helmet';
const app = express();
app.use(helmet);
app.get('/', (req, res) => res.send('Hello'));
app.listen(3000);

medium

A. helmet is imported incorrectly

B. helmet middleware is not called as a function

C. app.listen is missing a callback

D. app.get route is missing a response

Solution

1. Step 1: Check middleware usage

   Middleware must be called as a function: app.use(helmet()); not app.use(helmet);.

2. Step 2: Verify other code parts

   Import is correct, app.listen works without callback, and route sends response properly.

3. Final Answer:

   helmet middleware is not called as a function -> Option B

4. Quick Check:

   Middleware must be called with () = A [OK]

Hint: Always call middleware with () in app.use [OK]

Common Mistakes:

• Using app.use(helmet) instead of app.use(helmet())
• Thinking app.listen needs a callback
• Forgetting to send response in route

5. You want to add morgan logging middleware only for POST requests in your Express app. Which code correctly applies this?

hard

A. app.use((req, res, next) => { if(req.method === 'POST') morgan('dev')(req, res, next); else next(); });

B. app.post('*', morgan('dev'));

C. app.use(morgan('dev')); if(req.method === 'POST') next();

D. app.use('/post', morgan('dev'));

Solution

1. Step 1: Understand middleware conditional use

   To run middleware only on POST, wrap it in a function checking req.method.

2. Step 2: Analyze options

   app.use((req, res, next) => { if(req.method === 'POST') morgan('dev')(req, res, next); else next(); }); calls morgan only if method is POST, else calls next(). Others either apply to wrong paths or misuse middleware.

3. Final Answer:

   app.use((req, res, next) => { if(req.method === 'POST') morgan('dev')(req, res, next); else next(); }); -> Option A

4. Quick Check:

   Conditional middleware call for POST = D [OK]

Hint: Wrap middleware in function checking req.method for selective use [OK]

Common Mistakes:

• Using app.use with path that doesn't match POST method
• Calling middleware without next() in else branch
• Trying to use app.post with middleware incorrectly