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

A Better File Structure

📖 Context

Time for a complete restructuring of the app — moving from one large file into a proper multi-file structure. The goal is to split the code by responsibility: routers, controllers, and the server entry point.

🔹 Step 1: Creating the Routes Folder

📁 A new routes folder is created containing:

  • 📄 tourRoutes.js

  • 📄 userRoutes.js

📄 Cut the tourRouter From the app.js file and paste it in the routes/tourRoutes.js file:

const express = require('express');

// (route handler functions temporarily placed here too, for now)

const router = express.Router();

router
  .route('/')
  .get(getAllTours)
  .post(createTour);

router
  .route('/:id')
  .get(getTour)
  .patch(updateTour)
  .delete(deleteTour);

module.exports = router;

  • 📥 express needs to be imported here separately, since this is now its own module with its own scope.

const express = require('express');

  • The router variable is conventionally just called router (not tourRouter) — since the file name (tourRoutes.js) already makes clear which resource it belongs to.

  • 📦 module.exports = router — since only one thing is being exported from this file, module.exports is used directly (as opposed to attaching multiple things to the exports object).

  • The same structure is repeated for routes/userRoutes.js.

  • Cut this part from the app.js file add this part in the tourRoutes.js file:

📝 Note on Naming

  • 📁 The folder is called routes (plural, matching tourRoutes.js / userRoutes.js).

  • 🛣️ The variable exported from each file is called router (singular).

  • ✅ This naming distinction is intentional and just a stylistic convention.

🔹 Step 2: Wiring the Routers Back into the Main App File

const tourRouter = require('./routes/tourRoutes');
const userRouter = require('./routes/userRoutes');

  • Cut the fs module from app.js and paste it in the tourRoutes.js file:

🔹 Step 3: Fixing Broken File Paths After the Move

  • 📂 Since tourRoutes.js now lives inside a routes subfolder, __dirname points to a different location than before.

  • ⬆️ Any file-reading code (like reading the tours JSON file) needs its path adjusted to go up one level, then into dev-data/data/tours-simple.json.

💡 Why this matters

  • 📍 Moving files changes what __dirname resolves to — a common source of "file not found" errors during this kind of refactor.

  • 🔧 Some breakage during a big refactor like this is normal and expected.

🔹 Step 4: Creating the Controllers Folder

📁 A new controllers folder is created containing:

  • 📄 tourController.js

  • 📄 userController.js

💡 Why "controllers" and not "handlers"

  • 🎮 The functions were previously called route handlers, but the course will later introduce the MVC (Model-View-Controller) architecture pattern, where these functions are conventionally called controllers.

  • 🏗️ Naming the folder this way now sets up that terminology in advance.

📄 controllers/tourController.js

const fs = require('fs');

// (tours data reading logic here)

exports.getAllTours = (req, res) => { /* ... */ };
exports.getTour = (req, res) => { /* ... */ };
exports.createTour = (req, res) => { /* ... */ };
exports.updateTour = (req, res) => { /* ... */ };
exports.deleteTour = (req, res) => { /* ... */ };

  • export controller

💡 Why exports.functionName instead of module.exports

  • 📦 This file needs to export multiple functions, not just one.

  • 🧩 Attaching each function directly onto the exports object allows all of them to be exported together — this is a different pattern from the single-export case used in the router files.

The same is repeated for controllers/userController.js.

🔹 Step 5: Importing Controllers into the Route Files

// routes/tourRoutes.js
const tourController = require('./../controllers/tourController');

router
  .route('/')
  .get(tourController.getAllTours)
  .post(tourController.createTour);

router
  .route('/:id')
  .get(tourController.getTour)
  .patch(tourController.updateTour)
  .delete(tourController.deleteTour);

  • The same pattern is applied to userController.js importing from userRoutes.js.

  • Import a module in userRoutes.js file and add userController in the router:

const userController = require('./../controllers/userController');

💡 Why each part works:

  • ../controllers/tourController — needs to move up one level (out of routes), then into controllers.

  • Since the controller file exports multiple functions onto the exports object, requiring that file returns an object (tourController) where each exported function is a property — so tourController.getAllTours, tourController.createTour, etc. are all accessible.

🔹 Step 6: Recap of the Request Flow Through the New Structure

  1. 📨 A request arrives in app.js.

  2. 🛣️ Based on the URL, it enters the matching router (e.g. tourRouter).

  3. 🎮 Based on the specific route/method, the router calls the matching controller function (e.g. from tourController.js).

  4. 📤 The controller function sends the response, completing the request-response cycle.

✅ This is now spread across three distinct files/layers instead of one — routes, controllers, and the main app file.

🔹 Step 7: Creating server.js — Separating Express from the Server

💡 Why this step exists

Best practice is to keep everything Express-related in one file (app.js) and everything server-related (starting the server, database config, environment variables, error handling, etc.) in a separate main file (server.js).

📄 server.js

const app = require('./app');

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

📄 export app.js

// ...all middleware, routers, and app configuration...

module.exports = app;

💡 Why each part works:

  • 🚀 The app.listen(...) call (previously at the bottom of the main file) is moved into server.js.

  • 📦 app.js now exports the configured Express app via module.exports = app.

  • 📥 server.js imports it using a relative path (./app), since it's a local file in the same folder.

  • ⭐ Going forward, server.js becomes the true entry point of the application — later additions like database connections and environment variable setup will live here, since those aren't strictly Express concerns.

🔹 Step 8: Changing the script and Testing App

Now, since server.js is the actual entry point, lets update the npm start script tag

"scripts": {
  "start": "nodemon server.js"
}

Running the app in case not already running:

npm start

  • Now send the request and check the status:

📁 Final File Structure

project/
├── controllers/
│   ├── tourController.js
│   └── userController.js
├── routes/
│   ├── tourRoutes.js
│   └── userRoutes.js
├── app.js          # Express app config + middleware + mounted routers
├── server.js       # Entry point — starts the server
└── package.json

✅ Key Takeaway

  • 🛣️ Routes define the endpoints and map them to controllers.

  • 🎮 Controllers contain the logic for handling requests.

  • ⚙️ app.js is used for Express setup (middleware and routers).

  • 🚀 server.js starts the server and handles app initialization.

  • 📦 Use module.exports for a single export, and exports for multiple exports.

  • 📂 Update relative paths when moving files between folders.

  • ▶️ Use npm start to start the application.

🎯 Suggested Practice

  • 🔍 Trace a request step-by-step through the new structure:

✅ Following this flow a few times is one of the best ways to understand how Express applications are organized.