Hey there! Totally get your concern—shoving every route and endpoint into server.js works for tiny apps, but once you start scaling to 25+ pages and dozens of Ajax requests, it’ll quickly turn into a messy, unmaintainable file. Let’s break down practical, scalable ways to reorganize your code so it stays clean as your app grows.

1. Split Routes into Dedicated Files #

The first step is to yank all your route handlers out of server.js and group them into separate files based on their purpose (e.g., page routes vs. API routes).

Example: Page Routes File #

Create a routes folder in your project root, then add a pages.js file for all your page rendering routes:

// routes/pages.js
const express = require('express');
const router = express.Router();

// Home routes
router.get('/', (req, res) => {
  res.render('home', { title: 'Home' });
});

router.get('/home', (req, res) => {
  res.render('home', { title: 'Home' });
});

// Auth pages
router.get('/register', (req, res) => {
  res.render('register', { title: 'Register' });
});

// Add all your other page routes here (login, dashboard, etc.)

module.exports = router;

Example: API Routes File #

For your Ajax requests, create an api.js file (or split further by resource later):

// routes/api.js
const express = require('express');
const router = express.Router();

// User-related Ajax endpoints
router.post('/users/register', (req, res) => {
  // Handle registration logic here
  res.json({ success: true });
});

router.get('/users/profile', (req, res) => {
  // Fetch user profile data
  res.json({ user: req.user });
});

// Add other API endpoints here

module.exports = router;

Update server.js to Use These Routes #

Now your server.js becomes a lean entry point that just mounts these routes:

const express = require("express")
const path = require("path")
const exphbs = require("express-handlebars")
// Import your route files
const pageRoutes = require('./routes/pages');
const apiRoutes = require('./routes/api');

let app = express()

// View engine setup (we’ll split this later too!)
app.set("views", path.join(__dirname,'templates'))
app.engine('handlebars', exphbs({ defaultLayout:'main' }))
app.set('view engine','handlebars')

app.set('port', (process.env.PORT || 3000));

// Mount routes
app.use('/', pageRoutes); // All page routes start with /
app.use('/api', apiRoutes); // All API routes start with /api

app.use(express.static(path.join(__dirname, '/public')));

app.listen(app.get('port'),()=>{
  console.log(`Server started on port : ${app.get('port')}`)
})

2. Split Routes Even Further by Feature #

Once you have more routes, you can break them down into feature-specific files for even better organization. For example:

• routes/auth.js (login, register, password reset pages/API)
• routes/dashboard.js (dashboard pages and related Ajax endpoints)
• routes/static.js (about, contact, privacy policy pages)

Then create a routes/index.js to consolidate these sub-routes:

// routes/index.js
const express = require('express');
const router = express.Router();

router.use('/', require('./static'));
router.use('/auth', require('./auth'));
router.use('/dashboard', require('./dashboard'));

module.exports = router;

Now your server.js only needs one line to load all page routes:

app.use('/', require('./routes'));

3. Extract Configuration & Middleware #

You can also move setup logic (like view engine configuration) into separate files to keep server.js focused on bootstrapping the app.

Example: View Engine Config File #

Create config/viewEngine.js:

const path = require('path');
const exphbs = require('express-handlebars');

module.exports = (app) => {
  app.set("views", path.join(__dirname, '../templates'));
  app.engine('handlebars', exphbs({ defaultLayout:'main' }));
  app.set('view engine','handlebars');
};

Update server.js #

const express = require("express")
const path = require("path")
const configureViewEngine = require('./config/viewEngine');
const routes = require('./routes');
const apiRoutes = require('./routes/api');

let app = express()

// Load configuration
configureViewEngine(app);
app.set('port', (process.env.PORT || 3000));

// Mount routes
app.use('/', routes);
app.use('/api', apiRoutes);

app.use(express.static(path.join(__dirname, '/public')));

app.listen(app.get('port'),()=>{
  console.log(`Server started on port : ${app.get('port')}`)
})

Final Project Structure #

After these changes, your project will look clean and scalable:

your-app/
├── config/
│   └── viewEngine.js
├── routes/
│   ├── api/
│   │   └── index.js (and user/post sub-routes later)
│   ├── auth.js
│   ├── dashboard.js
│   ├── static.js
│   └── index.js
├── templates/
│   ├── layouts/
│   └── (your view files)
├── public/
├── server.js
└── package.json

This structure makes it easy to find, update, and add new features without digging through a massive server.js file.

内容的提问来源于stack exchange，提问作者CliffTheCoder