Application-level middleware in Express - Step-by-Step Execution

Concept Flow - Application-level middleware

Request Received

↓

Middleware 1 Executes

↓

Middleware 2 Executes

↓

Route Handler Executes

↓

Response Sent

↓

End

The request passes through each middleware in order, then reaches the route handler, which sends the response.

Execution Sample

Express

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

app.use((req, res, next) => {
  console.log('Middleware 1');
  next();
});

app.get('/', (req, res) => res.send('Hello World!'));

This code sets up an Express app with one middleware that logs a message, then a route that sends a response.

Execution Table

Step	Action	Middleware/Handler	Console Output	Next Called	Response Sent
1	Request received	-	-	-	-
2	Middleware 1 runs	Middleware 1	Middleware 1	Yes	-
3	Route handler runs	Route Handler for '/'	-	-	Hello World!
4	Response sent	-	-	-	Hello World!
5	Request cycle ends	-	-	-	-

💡 Response sent by route handler, request cycle ends.

Variable Tracker

Variable	Start	After Middleware 1	After Route Handler	Final
req	Incoming request object	Passed through Middleware 1	Handled by Route Handler	Request cycle complete
res	Response object	Passed through Middleware 1	Response sent	Response cycle complete
next	Function to call next middleware	Called to continue	Not called (end of chain)	No further middleware

Key Moments - 2 Insights

Why does the route handler run after the middleware?

Because the middleware calls next(), which tells Express to continue to the next middleware or route handler, as shown in step 2 of the execution_table.

What happens if middleware does not call next()?

The request stops there and the route handler never runs, so no response is sent. This is why next() is important, as seen in the execution_table where next is called at step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is logged to the console at step 2?

A "Middleware 1"

B "Route Handler"

C "Hello World!"

D Nothing

💡 Hint

Check the 'Console Output' column at step 2 in the execution_table.

At which step is the response sent to the client?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Response Sent' column in the execution_table.

If middleware did not call next(), what would happen to the route handler?

A It would run immediately

B It would run twice

C It would never run

D It would send two responses

💡 Hint

Refer to the key_moments section about the importance of calling next().

Concept Snapshot

Application-level middleware in Express runs in order for each request.
Each middleware receives req, res, and next.
Middleware must call next() to pass control.
Route handlers run after middleware chain.
Response is sent by route handler or middleware.
Middleware can modify req/res or end response early.

Full Transcript

Application-level middleware in Express is a function that runs for every request to the app or specific routes. When a request comes in, Express runs middleware functions in the order they were added. Each middleware receives the request and response objects, plus a next function. Calling next() passes control to the next middleware or route handler. If next() is not called, the request stops and no further processing happens. After middleware, the route handler runs and sends the response. This flow ensures middleware can modify requests or responses before the final handler sends data back to the client.

Practice

1. What is the main purpose of application-level middleware in Express?

easy

A. To run code for every request or specific routes before the final handler

B. To directly send HTML files to the client

C. To connect Express with a database

D. To create new HTTP servers

Solution

1. Step 1: Understand middleware role

   Application-level middleware runs before route handlers to process requests.

2. Step 2: Identify middleware usage

   It can modify requests, responses, or decide to stop the request cycle early.

3. Final Answer:

   To run code for every request or specific routes before the final handler -> Option A

4. Quick Check:

   Middleware runs before handlers [OK]

Hint: Middleware runs before routes to process requests [OK]

Common Mistakes:

• Confusing middleware with route handlers
• Thinking middleware creates servers
• Assuming middleware connects databases directly

2. Which of the following is the correct syntax to add application-level middleware in Express?

easy

A. app.addMiddleware(function(req, res) { next(); });

B. app.middleware((req, res) => { console.log('Middleware'); });

C. app.use((req, res, next) => { console.log('Middleware'); next(); });

D. app.routeMiddleware((req, res, next) => { next(); });

Solution

1. Step 1: Recall Express middleware syntax

   Express uses app.use() to add middleware functions.

2. Step 2: Check function parameters

   Middleware functions receive req, res, next and must call next() to continue.

3. Final Answer:

   app.use((req, res, next) => { console.log('Middleware'); next(); }); -> Option C

4. Quick Check:

   app.use with (req, res, next) and next() [OK]

Hint: Middleware uses app.use with three parameters and calls next() [OK]

Common Mistakes:

• Using non-existent methods like app.middleware
• Omitting the next parameter or call
• Confusing middleware with route handlers

3. Consider this Express code snippet:

app.use((req, res, next) => { console.log('First'); next(); });
app.use((req, res, next) => { console.log('Second'); next(); });
app.get('/', (req, res) => { res.send('Hello'); });

What will be printed in the console when a GET request is made to '/'?

medium

A. Second\nFirst

B. First\nSecond

C. Hello

D. No output

Solution

1. Step 1: Understand middleware execution order

   Middleware runs in the order they are added with app.use().

2. Step 2: Trace console logs

   First middleware logs 'First' then calls next(), second logs 'Second' then calls next(), then route sends response.

3. Final Answer:

   First\nSecond -> Option B

4. Quick Check:

   Middleware executes in order added [OK]

Hint: Middleware logs appear in order of app.use calls [OK]

Common Mistakes:

• Assuming route handler logs to console
• Thinking middleware runs after route
• Mixing order of middleware execution

4. What is the problem with this middleware code?

app.use((req, res, next) => { console.log('Middleware running'); });
app.get('/', (req, res) => { res.send('Done'); });

medium

A. Middleware should be added after routes

B. Middleware syntax is incorrect

C. Route handler is missing parameters

D. Missing call to next(), request will hang

Solution

1. Step 1: Check middleware function

   The middleware logs a message but does not call next().

2. Step 2: Understand effect of missing next()

   Without calling next(), the request does not proceed to the route handler, causing the request to hang.

3. Final Answer:

   Missing call to next(), request will hang -> Option D

4. Quick Check:

   Middleware must call next() to continue [OK]

Hint: Always call next() in middleware to avoid hanging requests [OK]

Common Mistakes:

• Forgetting to call next() in middleware
• Thinking middleware runs after routes
• Assuming middleware syntax is wrong without checking next()

5. You want to create middleware that only runs for routes starting with '/admin'. Which is the correct way to apply this middleware?

hard

A. app.use('/admin', (req, res, next) => { console.log('Admin middleware'); next(); });

B. app.use((req, res, next) => { if(req.url.startsWith('admin')) { console.log('Admin middleware'); } next(); });

C. app.get('/admin', (req, res, next) => { console.log('Admin middleware'); next(); });

D. app.use('*admin', (req, res, next) => { console.log('Admin middleware'); next(); });

Solution

1. Step 1: Understand path filtering in middleware

   Express allows specifying a path prefix in app.use(path, middleware) to run middleware only on matching routes.

2. Step 2: Evaluate options

   app.use('/admin', (req, res, next) => { console.log('Admin middleware'); next(); }); correctly uses app.use('/admin', ...) for prefix matching. app.use((req, res, next) => { if(req.url.startsWith('admin')) { console.log('Admin middleware'); } next(); }); has incorrect condition (startsWith('admin') misses leading /, never matches). app.get('/admin', (req, res, next) => { console.log('Admin middleware'); next(); }); is a route handler, not middleware. app.use('*admin', (req, res, next) => { console.log('Admin middleware'); next(); }); *admin matches paths containing admin at the end, not starting with /admin.

3. Final Answer:

   app.use('/admin', (req, res, next) => { console.log('Admin middleware'); next(); }); -> Option A

4. Quick Check:

   Use app.use with path prefix for selective middleware [OK]

Hint: Use app.use('/path', middleware) to target specific routes [OK]

Common Mistakes:

• Using route handlers instead of middleware
• Incorrect conditional checks in global middleware
• Wrong path patterns like wildcards in wrong position