Built-in middleware (json, urlencoded, static) in Express - Mini Project: Build & Apply

Using Express Built-in Middleware: json, urlencoded, and static

📖 Scenario: You are building a simple Express server for a small website. The server needs to handle JSON data from clients, process form submissions, and serve static files like images and stylesheets.

🎯 Goal: Create an Express app that uses the built-in middleware for JSON parsing, URL-encoded form data parsing, and serving static files from a folder named public.

📋 What You'll Learn

Create an Express app instance

Use the built-in express.json() middleware

Use the built-in express.urlencoded() middleware with extended: false

Use the built-in express.static() middleware to serve files from the public folder

💡 Why This Matters

🌍 Real World

Web servers often need to handle JSON data from APIs, form submissions from users, and serve static assets like images and CSS files. Using Express built-in middleware makes these tasks easy and efficient.

💼 Career

Understanding how to use Express middleware is essential for backend web development jobs that involve building APIs and serving web content.

1

Create Express app instance

Write code to import Express and create an app instance called app.

Express

// Your code here

Hint

Use import express from 'express' and then const app = express().

2

Add JSON and URL-encoded middleware

Add the built-in middleware express.json() and express.urlencoded({ extended: false }) to the app using app.use().

Express

import express from 'express';
const app = express();

// Add JSON and URL-encoded middleware here

Hint

Use app.use(express.json()) and app.use(express.urlencoded({ extended: false })).

3

Add static middleware to serve files

Add the built-in middleware express.static('public') to the app using app.use() to serve static files from the public folder.

Express

import express from 'express';
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Add static middleware here

Hint

Use app.use(express.static('public')) to serve static files.

4

Complete the Express app setup

Add a listener to the app that listens on port 3000 using app.listen().

Express

import express from 'express';
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static('public'));

// Add app.listen here

Hint

Use app.listen(3000) to start the server on port 3000.

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