Built-in middleware (json, urlencoded, static) in Express - Step-by-Step Execution

Concept Flow - Built-in middleware (json, urlencoded, static)

Client sends request

↓

Express receives request

↓

Middleware json parses body?

Yes→req.body filled with JSON

|No↓

Middleware urlencoded parses body?

Yes→req.body filled with form data

|No↓

Middleware static serves file if URL matches

↓

Route handler processes request

↓

Response sent back to client

Express processes requests by passing them through built-in middleware in order: JSON parser, URL-encoded parser, then static file server before reaching route handlers.

Execution Sample

Express

const express = require('express');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

This code sets up Express to parse JSON bodies, parse URL-encoded form data, and serve static files from the 'public' folder.

Execution Table

Step	Request Type	Middleware Checked	Action Taken	req.body Content	Response
1	POST with JSON body	json	Parsed JSON body	{"name":"Alice"}	Pass to next
2	POST with JSON body	urlencoded	Skipped (body already parsed)	{"name":"Alice"}	Pass to next
3	POST with JSON body	static	Skipped (not a static file request)	{"name":"Alice"}	Pass to route
4	GET /index.html	json	Skipped (no body)	undefined	Pass to next
5	GET /index.html	urlencoded	Skipped (no body)	undefined	Pass to next
6	GET /index.html	static	Served static file /index.html	undefined	Response sent with file
7	POST with URL-encoded body	json	Skipped (body not JSON)	undefined	Pass to next
8	POST with URL-encoded body	urlencoded	Parsed form data	{"email":"[e-mail]"}	Pass to next
9	POST with URL-encoded body	static	Skipped (not a static file request)	{"email":"[e-mail]"}	Pass to route
10	Request ends	-	-	-	No more middleware, route handles request

💡 Middleware chain ends after static middleware or when route handler responds.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 6	After Step 8	Final
req.body	undefined	{"name":"Alice"}	{"name":"Alice"}	{"name":"Alice"}	undefined	{"email":"[e-mail]"}	depends on request

Key Moments - 3 Insights

Why does the urlencoded middleware skip parsing when JSON middleware already parsed the body?

Because the JSON middleware fills req.body first if the content-type is JSON, urlencoded middleware sees req.body is already set and skips parsing, as shown in steps 1 and 2.

How does the static middleware decide to serve a file or pass to the next handler?

Static middleware checks if the request URL matches a file in the static folder. If yes, it serves the file (step 6). Otherwise, it passes control to the next middleware (steps 3 and 9).

What happens if a POST request has URL-encoded data but no JSON?

JSON middleware skips parsing (step 7), urlencoded middleware parses the form data and fills req.body (step 8), then static middleware skips (step 9).

Visual Quiz - 3 Questions

Look at the execution table, what is req.body after step 1?

A undefined

B {"name":"Alice"}

C {"email":"[e-mail]"}

D {}

💡 Hint

Check the 'req.body Content' column at step 1 in the execution_table.

At which step does the static middleware serve a file?

A Step 3

B Step 9

C Step 6

D Step 2

💡 Hint

Look for 'Served static file' in the 'Action Taken' column.

If a request has JSON body, what will urlencoded middleware do?

A Skip parsing because req.body is already set

B Parse the JSON body again

C Serve static files

D Throw an error

💡 Hint

See steps 1 and 2 where urlencoded middleware skips after JSON middleware.

Concept Snapshot

Express built-in middleware order:
1. express.json() parses JSON request bodies into req.body.
2. express.urlencoded() parses URL-encoded form data into req.body.
3. express.static() serves static files from a folder.
Middleware runs in order; if one handles the request, others may skip.
Use these to easily handle common request types and serve files.

Full Transcript

This visual execution trace shows how Express built-in middleware processes incoming requests. When a client sends a request, Express passes it first through the json middleware, which parses JSON bodies and fills req.body. If the body is not JSON, the urlencoded middleware tries to parse URL-encoded form data. Then the static middleware checks if the request URL matches a static file to serve. If so, it sends the file as a response. Otherwise, the request continues to route handlers. The variable req.body changes depending on which middleware parses the body. The trace clarifies how middleware order affects request handling and when each middleware acts or skips. This helps beginners understand how Express processes different request types and serves static content.