codex-lv4-may-2025

Level Navigation: 1

Level 31: Refactor — Export App and Separate Server Startup

Goal

Refactor your Express server to separate app configuration from server startup. This is a common practice that makes your code more testable, reusable, and better organized.

Why Separate App from Server?

In your current setup, everything is in one file (src/index.js): the app creation, routes, and the app.listen() call. As your project grows, you’ll want to:

Test your app without starting a server: Testing tools like Supertest need access to your Express app, but they don’t need the server to be listening on a port.
Reuse your app: You might want to use the same app configuration in different contexts (testing, development, production).
Better organization: Separating concerns makes your code easier to understand and maintain.

What You’ll Do

Create src/app.js: Move your Express app creation and configuration here, then export it.
Update src/index.js: Import the app and handle server startup (the listen() call).

Step-by-Step Refactor

Step 1: Create `src/app.js` and Export the App

Create a new file src/app.js and move your Express app setup there:

Show Me: exporting the app from app.js


// src/app.js
import express from 'express';

const app = express();

// Middleware
app.use(express.json());
app.use(express.static('public'));

// Routes
app.get('/', (req, res) => {
  res.send('<h1>Hello Express!</h1><p>Your server is working!</p>');
});

app.get('/happy-birthday', (req, res) => {
  res.json({
    name: 'Alice',
    age: 25,
    greeting: 'Happy Birthday! 🎉'
  });
});

// ... all your other routes ...

// Export the app so it can be imported elsewhere
export default app;

Key changes:

All your app configuration (middleware, routes) stays in app.js
The app is exported using export default app;
No app.listen() call — that will go in a different file

Step 2: Update `src/index.js` to Import and Start the Server

Update src/index.js to import the app and handle server startup:

Show Me: importing app and starting server in index.js


// src/index.js
import app from './app.js';

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

Key changes:

Import the app: import app from './app.js';
Handle the listen() call here
Use environment variable PORT for flexibility (important for deployment)

Your New Project Structure

After refactoring, your project structure should look like this:

your-project/
├── src/
│   ├── app.js      ← App configuration (middleware, routes)
│   └── index.js    ← Server startup (listen call)
├── public/
│   └── ...
└── package.json

Testing the Refactor

Start your server:
```
npm run dev
```
- The server should start exactly as before
- All your routes should work the same way
Verify nothing broke:
- Test your routes in Postman or your browser
- Make sure all endpoints still respond correctly

Digging Deeper: ES6 Module Exports

Exporting with export default:

export default app; makes the app the default export from the module
When importing, you can use any name: import app from './app.js' or import myApp from './app.js'
Only one default export per module

Why this pattern is common:

Separation of concerns: App configuration is separate from server startup
Testability: Tests can import the app without starting a server
Flexibility: You can create multiple server instances or use the app in different contexts
Industry standard: Most Express projects follow this pattern

What’s Next?

In the next level, you’ll set up testing. Having the app exported makes it easy to import in your test files without needing to start a server. This refactor sets you up for success with automated testing!

Note: If you’re using TypeScript, the same pattern applies—just use .ts extensions and TypeScript syntax.