Hey Codders! 👋
It’s Vikas Sankhla here from Web Codder, and today we are going to make backend coding much easier with Express.js! 🎉
If you’ve used Node.js, you know it’s powerful, but sometimes it feels like putting together LEGO without instructions. 🧱
👉 Enter Express.js!
It’s like getting a ready-made kit that helps you build faster, cleaner, and easier. 💼
🚀 What Is Express.js?
Imagine you’re building a shop 🏪.
- Node.js gives you the bricks to build.
- Express.js gives you pre-built walls and doors. 🚪🏗️
In tech terms:
Express.js is a web framework that sits on top of Node.js and makes it super simple to handle:
- Routes 🚦
- Requests & Responses 💬
- Middleware 🛠️
⚙️ Why Use Express.js?
Here’s a quick before & after:
| Without Express.js | With Express.js |
|---|---|
| Lots of code just to set up! | Quick setup with fewer lines ✍️ |
| Manual routing 🚗 | Built-in routing 🚦 |
| Complex request handling | Easy request & response 📦 |
👉 TL;DR: Express saves time & effort!
🛠️ Setting Up Express.js
1️⃣ Install Express
In your project folder, open terminal and type:
npm init -y
npm install express
2️⃣ Create app.js
Here’s the basic code to get started:
jsCopyEditconst express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello from Web Codder! 🚀');
});
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
🚗 Defining Routes
With Express, you can handle different pages (routes) easily.
Example:
jsCopyEditapp.get('/', (req, res) => {
res.send('Home Page 🏠');
});
app.get('/about', (req, res) => {
res.send('About Page ℹ️');
});
This means:
/→ Shows “Home Page 🏠”/about→ Shows “About Page ℹ️”
🔄 Handling Dynamic Data
Want to handle dynamic URLs like /user/John?
✅ URL Parameters
jsCopyEditapp.get('/user/:name', (req, res) => {
const name = req.params.name;
res.send(`Hello, ${name}! 👋`);
});
Now visit http://localhost:3000/user/Vikas and see:
👉 “Hello, Vikas! 👋”
✅ Query Strings
URL: /search?item=laptop
Code:
jsCopyEditapp.get('/search', (req, res) => {
const item = req.query.item;
res.send(`You searched for: ${item} 🔍`);
});
🛠️ Middleware in Express
🧐 What Is Middleware?
Think of middleware like a helper that sits between the request and response. 🛤️
It can:
- 🚥 Check things (e.g., auth)
- 📝 Modify data
- ❌ Stop requests if needed
Example:
jsCopyEditapp.use((req, res, next) => {
console.log('A request was made! 🛎️');
next();
});
Every time a request comes in, you’ll see a message in your terminal. 😊
🧰 Built-in Middleware
✅ body-parser
Handles data from POST requests.
Example:
jsCopyEditapp.use(express.json());
app.post('/data', (req, res) => {
console.log(req.body);
res.send('Data received ✅');
});
✅ cookie-parser (need to install)
bashCopyEditnpm install cookie-parser
Code:
jsCopyEditconst cookieParser = require('cookie-parser');
app.use(cookieParser());
Now you can read cookies 🍪 easily!
✅ Quick Recap Table
| Concept | Example Code |
|---|---|
| Basic Route | app.get('/', (req, res) => { ... }); |
| URL Parameter | /user/:name → req.params.name |
| Query String | /search?item=laptop → req.query.item |
| Middleware | app.use((req, res, next) => { ... }); |
| body-parser | app.use(express.json()); |
| cookie-parser | app.use(cookieParser()); |
🎨 Visual: Flow of an Express Request
🎯 Conclusion
Congrats, Codders! 🎉 Today you learned:
- ✅ What Express.js is
- ✅ How to build routes easily
- ✅ Handle dynamic URLs & query strings
- ✅ Use middleware like a pro 🚀
👉 Keep Learning with Web Codder:
