Express.js, the fun way

0 The 30-second why

const http = require('http');
http.createServer((req, res) => {
  if (req.url === '/' && req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hi!');
  } else {
    res.writeHead(404); res.end('Nope');
  }
}).listen(3000);

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

app.get('/', (req, res) => res.send('Hi!'));

app.listen(3000);

Express gives you four superpowers: routing, middleware, convenience methods (res.send, res.json…) and views. We'll play with all four.

1 Hello, Express 👋

const express = require('express');   // 1. grab Express
const app = express();                // 2. make an app

// 3. answer GET / with a message
app.get('/', (req, res) => {
  res.send('Welcome to the Anime Archive! 🎬');
});

// 4. open the door on port 3000
app.listen(3000, () => console.log('server up on :3000'));

Four lines and you have a server. res.send() even sets the status code and headers for you. That's the whole pitch. 🎉

2 Middleware 🎢

Now for real: this logger runs on every request and tags it before the routes even see it. Run it and visit a couple of paths — watch the console.

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

// runs on EVERY request, then hands off with next()
app.use((req, res, next) => {
  console.log('👀 ' + req.method + ' ' + req.url);
  req.hero = 'Saitama';   // stash something for the routes to use
  next();          // ⬅️ forget this and the request hangs forever
});

app.get('/', (req, res) => res.send('Home — today\'s hero: ' + req.hero));
app.get('/anime', (req, res) => res.send('Anime list, brought to you by ' + req.hero));

app.listen(3000);

3 Routes & params 🎯

Play with the matcher — type a route pattern and a URL, watch Express pull out the params (or 404):

And here it is live — run it, then visit /anime/7 or /anime/42:

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

app.get('/', (req, res) =>
  res.send('<h1>Home</h1><a href="/anime/1">go to anime #1</a>'));

// :id is a route parameter → req.params.id
app.get('/anime/:id', (req, res) => {
  res.send('You asked for anime #' + req.params.id + ' 🎬');
});

app.listen(3000);

4 req & res cheat card 🎴

Quick play — run it, then visit /search?q=titan&sort=year and watch req.query come back as JSON:

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

app.get('/search', (req, res) => {
  if (!req.query.q) {
    return res.status(400).json({ error: 'add ?q=titan to search the anime list' });
  }
  res.json({ searchingFor: req.query.q, sortedBy: req.query.sort || 'default' });
});

app.get('/', (req, res) => res.send('try /search?q=titan&sort=year'));

app.listen(3000);

5 Boss level: build a REST API ⭐

Here's a complete, in-memory anime API — Model (an array), Controller (the routes), all in one. Run it, then use the tester's method dropdown to poke it. The data really changes between requests. This is the main event. 🎮

const express = require('express');
const app = express();
app.use(express.json());          // so POST bodies land in req.body

// 🗂️ our "database" — just an array
let anime = [
  { id: 1, title: "Death Note", studio: "Madhouse" },
  { id: 2, title: "Fullmetal Alchemist: Brotherhood", studio: "Bones" },
  { id: 3, title: "Attack on Titan", studio: "Wit Studio" }
];
let nextId = 4;

app.get('/anime', (req, res) => res.json(anime));          // read all

app.get('/anime/:id', (req, res) => {                       // read one
  const show = anime.find(a => a.id === Number(req.params.id));
  if (!show) return res.status(404).json({ error: 'not found' });
  res.json(show);
});

app.post('/anime', (req, res) => {                          // create
  const show = { id: nextId++, title: req.body.title, studio: req.body.studio };
  anime.push(show);
  res.status(201).json(show);
});

app.delete('/anime/:id', (req, res) => {                    // remove
  anime = anime.filter(a => a.id !== Number(req.params.id));
  res.json({ deleted: req.params.id, left: anime.length });
});

app.listen(3000, () => console.log('anime API ready — GET /anime'));

6 Views with Pug 🐶

Best learned by playing. Edit the Pug on the left, change the data box, watch the page rebuild live:

To use it in Express: tell the app you're using Pug, then res.render() a view with data. That's the V in MVC (Model = your array, Controller = the route, View = the Pug). Run it and visit /:

const express = require('express');
const app = express();
app.set('view engine', 'pug');    // 1. use Pug

const shows = ['Death Note', 'Demon Slayer', 'One Punch Man'];

app.get('/', (req, res) => {
  // 2. render the "index" view with data → finished HTML
  res.render('index', { name: 'Class', items: shows });
});

app.listen(3000);

Put it all together — the guided project

7 Wrap-up & quiz

1. express() makes an app; app.listen(port) starts it — a server in 4 lines.
2. Middleware is (req, res, next) — do your thing, then call next() or it hangs.
3. Routes are app.METHOD(path, handler); :params → req.params, query → req.query, body → req.body.
4. REST: GET read · POST create · PUT update · DELETE remove — one resource, four verbs.
5. res.render() + Pug turn a template + data into HTML — the View in MVC.

Quick self-check (6 questions)

8 Tips, tricks & fun facts 🎁

Pro tips (steal these)

• Order is everything. Middleware & routes run top-to-bottom, first match wins. Put express.json() and loggers before your routes, and your 404 handler last.
• Route params are strings. req.params.id is "1", not 1 — wrap it in Number() before comparing (exactly what the anime API does).
• Chain your reply. res.status(201).json(data) sets the code and the body in one clean line.
• Split big apps. One express.Router() per feature (an /anime router, a /users router) keeps app.js tiny.
• Never restart by hand. nodemon app.js (from Week 10) auto-reloads the server every time you save.
• Always catch the 404. End with app.use((req, res) => res.status(404).send('Not found')) so stray URLs get a friendly answer.

Fun facts to flex

9 Cheat-sheet posters 📄

🚂 Express.js essentials

Download Open / print

🐶 Pug template engine

Download Open / print

Both are SVG — crisp at any size, each prints on a single page, dark-mode friendly. 🖨️