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

Setting up Express and Basic Routing

📂 Project: Natours (Course Main Project)

🔹 Step 1: Get the Starter Project

  • ⬇️ Download the repo from here course files

  • 📖 Open starter folder from 4-natours

  • 📦 Contains: prettier config, ESLint config (not set up yet — comes later), CSS/images folders, and some data files used later in the section.

🔹 Step 2: Create package.json

npm init

  • 🏷️ Name: natours (must be lowercase, no capital letters allowed by npm).

  • 🔢 Version: 1

  • 📝 Description: e.g. "learning node, express, mongoDB"

  • 📄 Entry point: app.js (instead of the default index.js)

  • ⏭️ Skip test command, git, keywords — fill in author your name or any random name

🔹 Step 3: Install Express

npm i express@4

  • 📦 Installs the latest version 4 of Express.

  • ⚠️ Important: install version 4, not 5 — version 5 is a major version that could introduce breaking changes (even though not much actually changes).

  • 🏷️ @4 ensures the latest 4.x.x release (e.g. 4.16.4) — any 4.x version is fine.

  • 📁 This creates the node_modules folder.

🔹 Step 4: Create app.js

  • 📄 Convention: keep all Express configuration/setup in a file called app.js.

🔹 Step 5: Import Express and Create the App

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

  • 📥 express is a function — calling it (express()) returns an object (app) with a bunch of built-in methods attached.

🔹 Step 6: Start the Server

const port = 3000;

app.listen(port, () => {
  console.log(`App running on port ${port}...`);
});

  • 🚀 app.listen() is similar to the http module's .listen() used earlier — Express is 100% Node.js under the hood, just simplified.

🔹 Step 7: Define a Basic Route (GET)

app.get('/', (req, res) => {
  res.status(200).send('Hello from the server side');
});

  • 🛣️ Routing = defining how the app responds to a specific URL + HTTP method combination.

  • 📥 app.get(url, callback) — responds to GET requests on that URL.

  • 📦 Callback receives req (request) and res (response) — same concept as plain Node, but Express's req/res objects come with a lot more built-in data and methods.

  • 🔢 res.status(code) sets the HTTP status code — chain it before .send().

  • 📤 res.send(data) sends a plain string response.

🔹 Step 8: Set Up Nodemon

  • Install nodemon as dev dependency: npm i nodemon --save-dev

  • Setup package.json: add starter script

 "scripts": {
    "start": "nodemon app.js"
  },

🔹 Step 9: Run the Server

‼️ Note: You can use nodemon app.js, but npm start is the preferred approach since it's already configured.

npm start

  • ✅ Confirms: "App running on port 3000"

🔹 Step 10: Test With Postman

  • 📮 Set the URL to 127.0.0.1:3000 (or localhost:3000), method GET, hit Send.

  • 📄 Response: Hello from the server side

  • 🌐 Same result would show in a browser too — Postman is just more convenient for API testing going forward.

🔹 Step 11: Send JSON Instead of Plain Text

app.get('/', (req, res) => {
  res
    .status(200)
    .json({ message: 'Hello from the server side!', app: 'Natours' });
});

  • res.json(obj) sends a JSON response instead of res.send().

  • Postman displays it as nicely formatted, color-coded JSON, along with status code, response time, and response size.

  • Changing the status code (e.g. to 404) is as easy as res.status(404) — Postman will reflect that immediately.

🔹 Step 12: Test What Happens With an Undefined Route/Method

  • 🧪 Sending a POST request to / (with only a GET route defined) returns Express's default response:

Cannot POST /

  • ❌ With a 404 status — because no route matches that URL + method combination.

🔹 Step 13: Define a Route for POST

app.post('/', (req, res) => {
  res.send('You can post to this endpoint');
});

  • 📤 Sending POST to / now returns: "You can post to this endpoint" with status 200 (the default status when none is explicitly set).

🔹 Step 14: Automatic Headers

  • 🏷️ Using res.json(...) automatically sets the Content-Type header to application/json.

  • ⚙️ Express also automatically adds other headers like X-Powered-By: Express, Date, Connection, etc. (covered in more detail later in the course).

✅ Key Takeaway

  • 🚀 express() creates the app; app.listen() starts the server.

  • 🛣️ Routing in Express = app.<method>(url, callback) — e.g. app.get(), app.post().

  • 📤 res.send() → plain text/string response.

  • 📦 res.json() → JSON response (also auto-sets the correct Content-Type header).

  • 🔢 res.status(code) → sets the HTTP status code, chainable before .send()/.json().

  • ❌ Undefined route/method combinations automatically get a 404 "Cannot [METHOD] [URL]" response from Express.

  • ⚡ Compared to raw Node, Express drastically simplifies routing and response handling.