Think of middleware as:

A custom security checkpoint between the request and the final route handler.

Where Does Middleware Fit?

When someone sends a request to your server:

Client Request → Middleware 1 → Middleware 2 → Route Handler → Response

Middleware can:

• Log data
• Authenticate users
• Modify request/response
• Handle errors
• Stop or pass to the next step using next()

Syntax of Middleware

function middlewareName(req, res, next) {
  // Do something
  next(); // Move to next middleware/route
}

Example 1: Logging Middleware (Global)

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

// Middleware
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next(); // Important to move to the next handler
});
app.get('/', (req, res) => {
  res.send('Hello, Mahadev!');
});
app.listen(3000, () => console.log('Server running'));

Output on visiting /:

GET /

Example 2: Middleware for a Specific Route

function checkAdmin(req, res, next) {
  const isAdmin = false;
  if (isAdmin) {
    next();
  } else {
    res.status(403).send('Access Denied');
  }
}

app.get('/admin', checkAdmin, (req, res) => {
  res.send('Welcome Admin');
});

Example 3: Built-in Middleware

app.use(express.json()); // Parse JSON from request body

Example 4: Error-Handling Middleware

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

To trigger:

app.get('/error', (req, res) => {
  throw new Error('Force crash');
});

Coach’s Advice:

• Use app.use() for global middleware.
• Don’t forget next() or your request may hang.
• Chain multiple middlewares for clarity and separation of logic.
• Learn to use third-party middleware like:
• morgan for logging
• cors for cross-origin requests
• helmet for security

Tech Stack

• Node.js + Express.js
• In-memory array for simplicity (no DB)
• JSON responses for all routes

Project Structure

crud-api/
├── app.js
└── routes/
    └── users.js

Step-by-Step Code

📄 app.js – Entry Point

const express = require('express');
const app = express();
const usersRoute = require('./routes/users');

// Middleware to parse JSON
app.use(express.json());
// Route Middleware
app.use('/api/users', usersRoute);
// Start Server
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

📄 routes/users.js – User Routes

const express = require('express');
const router = express.Router();

// Mock data (in-memory)
let users = [
  { id: 1, name: 'Shiva' },
  { id: 2, name: 'Parvati' },
];

// GET all users
router.get('/', (req, res) => {
  res.json(users);
});

// GET single user by ID
router.get('/:id', (req, res) => {
  const user = users.find(u => u.id == req.params.id);
  if (!user) return res.status(404).send('User not found');
  res.json(user);
});

// POST create a new user
router.post('/', (req, res) => {
  const newUser = {
    id: users.length + 1,
    name: req.body.name
  };
  users.push(newUser);
  res.status(201).json(newUser);
});

// PUT update user
router.put('/:id', (req, res) => {
  const user = users.find(u => u.id == req.params.id);
  if (!user) return res.status(404).send('User not found');
  user.name = req.body.name;
  res.json(user);
});

// DELETE a user
router.delete('/:id', (req, res) => {
  const userIndex = users.findIndex(u => u.id == req.params.id);
  if (userIndex === -1) return res.status(404).send('User not found');
  const deletedUser = users.splice(userIndex, 1);
  res.json(deletedUser[0]);
});
module.exports = router;

What are req and res?

In every route handler, Express provides you with:

app.get('/', (req, res) => {
  // req: request from the client
  // res: response from the server
});

1. Sending Plain Text

app.get('/text', (req, res) => {
  res.send('Namaste from Mahadev’s server!');
});

🧠 Perfect for simple checks or greetings.

2. Sending HTML Content

app.get('/html', (req, res) => {
  res.send(`
    <h1>Welcome to Kailash</h1>
    <p>Mahadev is meditating...</p>
  `);
});

🧠 Use when you want to return a full HTML snippet directly.

3. Sending JSON (for APIs)

app.get('/json', (req, res) => {
  res.json({
    name: 'Mahadev',
    trishul: true,
    followers: ['Nandi', 'Ganesha', 'Parvati']
  });
});

🧠 This is best when you’re building APIs for frontend apps (React, Angular, etc.).

4. Using res.status() to Set HTTP Status

app.get('/notfound', (req, res) => {
  res.status(404).send('This page

5. Request Parameters (req.params & req.query)

app.get('/user/:name', (req, res) => {
  res.send(`Namaste, ${req.params.name}`);
});

// Example URL: /user/shiva → Response: Namaste, shiva

app.get('/search', (req, res) => {
  res.send(`You searched for: ${req.query.q}`);
});

// Example URL: /search?q=parvati → Response: You searched for: parvati

express.urlencoded() is a built-in middleware in Express that helps your server read form data sent via:

• application/x-www-form-urlencoded (the default form type in HTML)

Why Do You Need It?

When you submit an HTML form using POST, the data is sent to the server in a URL-encoded format like:

name=Shiva&power=Trishul

Without express.urlencoded(), your Express app won’t understand this data.

Syntax

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

extended: true allows for nested objects (more flexible parsing)

Step-by-Step Example

🧱 1. Create a simple HTML form

form.html

<form action="/submit" method="POST">
  <label>Name:</label>
  <input type="text" name="name" />
  <br/>
  <label>Power:</label>
  <input type="text" name="power" />
  <br/>
  <button type="submit">Submit</button>
</form>

2. Handle it in Express

app.js

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

// Middleware to parse URL-encoded form data
app.use(express.urlencoded({ extended: true }));
// Route to show the form
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/form.html');
});
// Route to handle form submission
app.post('/submit', (req, res) => {
  const { name, power } = req.body;
  res.send(`🧘‍♂️ Welcome, ${name}! Your power is ${power}.`);
});
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

What Happens Here?

1. You open http://localhost:3000
2. Fill out the form (e.g., name = Shiva, power = Trishul)
3. Hit submit → it sends a POST request to /submit
4. Express uses express.urlencoded() to parse req.body
5. You send back a response using that data

• Profile pictures
• PDFs, documents
• Image galleries
• Product photos

Install Multer

npm install multer

🗂️ Project Structure

file-upload-app/
├── uploads/            # <- where files will be saved
├── app.js
└── form.html

Step-by-Step Code

📄 1. HTML Form

form.html

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="myfile" />
  <button type="submit">Upload</button>
</form>

enctype="multipart/form-data" is required for file uploads.

2. Express App with Multer

app.js

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

// Set storage engine
const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
// Initialize upload middleware
const upload = multer({ storage: storage });
// Serve form page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/form.html');
});
// Handle file upload
app.post('/upload', upload.single('myfile'), (req, res) => {
  if (!req.file) {
    return res.send('No file uploaded.');
  }
  res.send(`File uploaded: ${req.file.filename}`);
});
// Start server
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

📂 Uploaded File Access

Once uploaded, files are saved in the uploads/ directory, e.g.:

uploads/1721667643010-shiva.jpg

You can make this folder publicly accessible with:

app.use('/uploads', express.static('uploads'));

Then access files like:
📎 http://localhost:3000/uploads/filename.jpg

Security Tips from Coach

✅ Always validate file types:

const fileFilter = (req, file, cb) => {
  const types = /jpeg|jpg|png|pdf/;
  const ext = types.test(path.extname(file.originalname).toLowerCase());
  if (ext) return cb(null, true);
  cb('Only images or PDFs allowed!');
};

const upload = multer({ storage, fileFilter });

✅ Limit file size:

const upload = multer({ storage, limits: { fileSize: 2 * 1024 * 1024 } }); // 2MB

res.send('<h1>Hello BB</h1>');

You render a template and inject dynamic data:

res.render('home', { name: 'BB' });

What is a Templating Engine?

Templating engines like EJS, Handlebars, or Pug allow you to write HTML with placeholders for data.

We’ll use EJS (Embedded JavaScript) — simple and powerful.

Step-by-Step: Dynamic HTML with EJS

1. Install EJS

npm install ejs

2. Project Structure

dynamic-html/
├── views/
│   └── home.ejs
├── app.js

3. Setup Express with EJS

app.js

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

// Set EJS as templating engine
app.set('view engine', 'ejs');
// Render home.ejs
app.get('/', (req, res) => {
  res.render('home', { name: 'Mahadev', power: 'Trishul' });
});
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

4. Create EJS Template

views/home.ejs

<!DOCTYPE html>
<html>
<head>
  <title>Welcome Page</title>
</head>
<body>
  <h1>Namaste <%= name %>!</h1>
  <p>Your power is: <%= power %></p>
</body>
</html>

5. Run and Visit

Start your server and visit:
👉 http://localhost:3000

You’ll see:

Namaste Mahadev!
Your power is: Trishul

Use EJS for:

• Login forms
• Dynamic blog pages
• Admin dashboards
• SEO-friendly pages

Combine with Express routes to:

• Pass data from DB to HTML
• Show different content per user/page

Use a views/partials folder for:

• header.ejs, footer.ejs reuse

mkdir my-express-app
cd my-express-app

2. Initialize the Project

npm init -y

This creates a package.json file.

3. Install Express

npm install express

Create app.js (Your Main File)

// app.js
const express = require('express');
const app = express();
// Define a route
app.get('/', (req, res) => {
  res.send('Hello, Mahadev!');
});
// Start the server
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Run the Server

node app.js

What You Just Did:

Node.js is a runtime environment that lets you run JavaScript on the server.

• It uses Google Chrome’s V8 engine.
• It’s event-driven and non-blocking, which makes it great for handling many connections at once (like chat apps, APIs, etc.).
• But by itself, it’s low-level — you have to write a lot of boilerplate code even for simple tasks like routing or sending HTML.

Think of Node.js as the raw power — like an engine block in a car.

Express.js: The Toolkit on Top of Node.js

Express.js is a framework built on top of Node.js to make your life easier.

• It simplifies routing, middleware, error handling, request/response management, and more.
• You can create a full API or website in 5–10 lines of code.
• It adds structure and gives you useful functions like app.get(), app.post(), res.send(), etc.

Think of Express.js as the vehicle body, controls, and dashboard — making Node.js easy to drive.

if you’re building any web-based backend or API, don’t use raw Node.js alone unless you’re doing something extremely custom. Use Express.js and focus on your app’s logic — not boilerplate code.

Real-World Analogy:

• Node.js = You build a house starting with bricks and cement.
• Express.js = You get pre-cut wood, a drill, and IKEA instructions — it’s all faster, safer, and modular.

Why Use Express.js?

Think of Node.js as the engine, and Express.js as the chassis + dashboard — it provides structure, shortcuts, and tools to build apps faster.

Without Express, writing a web server in plain Node.js involves a lot of manual code like http.createServer(). Express simplifies this.

Key Features of Express.js:

===============================================================

Routing: Handles different URLs and HTTP methods easily

Middleware: Processes requests (e.g., parse JSON, log data, handle errors)

Templating: Supports rendering dynamic HTML pages (e.g., using EJS, Handlebars)

REST APIs: Makes building RESTful services easy

Integration: Works well with databases (MongoDB, MySQL), authentication (JWT)

Minimal Setup: You can write a basic web server in just 4–5 lines

Simple Express.js Example

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

app.get('/', (req, res) => {
  res.send('Hello, Mahadev!');
});
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

🟢 Run this, open your browser, and you’ll see “Hello, Mahadev!” on http://localhost:3000

📦 How to Install Express:

npm init -y
npm install express

Use Cases:

• REST APIs (e.g., for mobile or React apps)
• Admin dashboards
• Authentication systems
• Blogging engines
• Ecommerce backends

1. Type Safety

TypeScript adds static type checking, which catches errors at compile time instead of at runtime.

• JavaScript: let user = {}; user.name.toUpperCase(); // Runtime error
• TypeScript: Property 'name' does not exist on type '{}' → Error shown during development.

Benefit: Fewer bugs, more predictable code.

2. Static Typing

TypeScript allows you to define variable types, catching errors at compile time.

Example:

function add(a: number, b: number): number {
  return a + b;
}

add(5, "10"); // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

Advantage: Prevents type-related bugs early, especially in large projects.

3. Better Code Completion and IntelliSense

TypeScript provides better auto-complete and suggestions in editors like VS Code.

Example:

interface User {
  id: number;
  name: string;
}

const user: User = { id: 1, name: "Vivek" };
// Typing `user.` will show IntelliSense with `id` and `name` properties

Advantage: Increases productivity and reduces errors.

4. Scalability

TypeScript is ideal for large-scale applications and team projects, where strict types enforce consistency and reduce regressions.

5. Object-Oriented Programming (OOP) Support

TypeScript supports classes, interfaces, inheritance, and access modifiers.

Example:

class Animal {
  constructor(public name: string) {}
  move() {
    console.log(`${this.name} moves.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Tommy");
dog.move(); // Tommy moves.
dog.bark(); // Woof!

Advantage: Encourages reusable, scalable design.

6. Optional and Default Parameters

Improves function usability and documentation.

Example:

function greet(name: string = "Guest") {
  console.log(`Hello, ${name}`);
}

greet();         // Hello, Guest
greet("Vivek");  // Hello, Vivek

7. Tooling and IDE Integration

TS compiler can highlight dead code, unreachable code, and provide suggestions.

Example:

function calculate(): number {
  return;
}
// ❌ Warning: Function lacks return statement

8. Compatibility with JavaScript

You can gradually migrate JS to TS.

Example:

// Valid JS code
let age = 25;

// In TS you can add types
let age: number = 25;

Thank you.