Express.js Mastery / Express: Let’s Start Building The Natours API!

Using 3rd-Party Middleware

📖 Context

So far, custom middleware has been written from scratch. Now it's time to use a third-party middleware package from npm to make development easier — specifically Morgan, a very popular logging middleware that displays request data directly in the console.

🔹 Step 1: Installing Morgan

A new terminal is opened in VS Code (using the + button) so the existing terminal/server process doesn't need to be interrupted.

npm install morgan

💡 Why it's a regular dependency, not a dev dependency:

  • 📦 Even though Morgan makes development easier, its code still runs as part of the actual application.

  • ✅ Because of that, it's installed as a normal dependency — not with -save-dev.

  • 📄 After installation, morgan appears in package.json under regular dependencies.

🔹 Step 2: Requiring and Using Morgan

const morgan = require('morgan');

// 1) MIDDLEWARES
app.use(morgan('dev'));
app.use(express.json());

// 2) ROUTE HANDLERS
// ...

// 3) ROUTES
// ...

// 4) START SERVER
// ...

💡 Why each part works:

  • 📥 require('morgan') imports the Morgan package.

  • 🧩 app.use(morgan('dev')) registers Morgan as middleware to log every incoming request.

  • 📝 'dev' is a built-in log format. Morgan also provides other formats like 'tiny'.

  • 🗂️ Use comment headers (e.g., // MIDDLEWARES, // ROUTES) to keep your code organized and easy to navigate.

🔹 Step 3: Understanding Why This Works — Looking at Morgan's Source Code

To better understand middleware, let's look at Morgan's source code.
GitHub (its entry point, index.js)

🔍 Key observations:

  • 📦 require('morgan') returns the package's main morgan function.

  • 🔄 Calling morgan('dev') returns another function.

  • ⚙️ That returned function has the standard middleware signature: (req, res, next).

  • ➡️ It calls next() after logging the request, allowing the request to continue.

💡 Why this matters

Third-party middleware like Morgan works exactly like your own middleware. It's simply a reusable function that follows Express's middleware pattern.

🔹 Step 4: Testing Morgan's Output

  • Go to the previous terminal and creates a request in postman:

📤 Sending a request produces console output showing:

  • 🌐 HTTP method

  • 🔗 URL

  • 🔢 Status code (color-coded)

  • ⏱️ Response time

  • 📏 Response size (in bytes)

🧪 Testing an Error Case

❌ Sending a request with an invalid ID (triggering a 404) produces a differently colored status code in the log — useful for quickly spotting errors during development at a glance.

📝 Note

Logs could also be saved to a file, but that's unnecessary for a project this size — console output is sufficient here.

🔹 Step 5: Exploring the Express Middleware Ecosystem

The official Express site (expressjs.com) includes:

  • 📘 A Getting Started section with basic guides.

  • 📚 An API reference (v4.x) documenting all methods/properties on req and res (e.g. req.body, res.json, res.send, and others to be used later in the course).

  • 🧩 A Middleware resources page listing recommended third-party middleware.

📜 Interesting Historical Note

  • 🕰️ Many of these recommended middleware packages — like body-parser — used to be built into Express (in Express 3), but were later removed to keep the core framework lighter.

  • 🔄 express.json() (used earlier to parse request bodies) is actually a version of body-parser that was added back into Express (around v4.16) to reduce confusion for beginners, since previously it required manually installing and requiring the separate body-parser package.

✅ Key Takeaway

  • Install third-party middleware with npm and register it using app.use().

  • Third-party middleware follows the same (req, res, next) pattern as custom middleware.

  • Morgan's 'dev' format logs useful request details during development.

  • Morgan is a regular dependency since it's part of the app's functionality.

  • The Express documentation is a great resource for built-in and third-party middleware.