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

Need a 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

Need a 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

Need a 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

Need a hint?

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