Setting up separate frontend and backend routing in Express.js

Frontend
1

I’m building a web app using Express.js and need to separate my frontend and backend sections. The frontend displays database content while the backend works like a content management system for creating new entries.

Here’s my current project structure:

project/
  ├── client/
  │     ├── assets // CSS, JS & images for client side
  │     ├── templates // Client-side jade files
  │     └── main.js
  │
  ├── admin/
  │     ├── assets // Admin panel CSS & resources
  │     └── templates // Admin templates
  │     └── admin.js
  │
  └── index.js // Main application entry point

My index.js file:

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

var settings = require('../project/settings.json')[app.get('env')];

var adminPanel = require('./admin/admin');
var clientSide = require('./client/main');

app.use(adminPanel);
app.use(clientSide);

app.set('port', settings.port || 8080);

var server = app.listen(app.get('port'), function() {
    console.log('Application running on port ' + app.get('port') + ' in ' + app.get('env') + ' environment');
});

The main.js file:

var express = require('express');
var router = express();

router.set('views', __dirname + '/templates');
router.set('view engine', 'jade');

router.use(express.static(__dirname + '/assets'));

router.get('/', function(req, res) {
    res.render('homepage', {title: 'Welcome'});
});

router.get('/contact', function(req, res) {
    res.render('homepage', {title: 'Contact Page'});
});

module.exports = router;

And admin.js:

var express = require('express');
var router = express();

router.set('views', __dirname + '/templates');
router.set('view engine', 'jade');

router.use(express.static(__dirname + '/assets'));

router.get('/admin', function(req, res) {
    res.render('homepage', {title: 'Admin Login'});
});

router.get('/admin/panel', function(req, res) {
    res.render('homepage', {title: 'Control Panel'});
});

module.exports = router;

The problem is that Express loads the correct templates but always uses the admin stylesheets for all routes. When I visit localhost:8080/contact, it should use CSS from client/assets/css/ but when I go to localhost:8080/admin, it should use styles from admin/assets/css/. Right now everything uses the admin styles. How do I fix this routing issue?

2

This happens because Express serves static files based on middleware order, and both your modules are using express.static() without prefixes. The admin assets get served for everything since they’re loaded first. I ran into this exact issue building a similar app. Fix it by adding route prefixes to your static middleware. In main.js: router.use('/client', express.static(__dirname + '/assets')); In admin.js: router.use('/admin', express.static(__dirname + '/assets')); Then update your templates - use /client/css/style.css in client templates and /admin/css/style.css in admin templates. This stops the middleware conflict and each section serves its own assets properly.

3

your static middleware is conflicting. namespace the static routes - put router.use('/admin', express.static(__dirname + '/assets')) in admin.js and router.use('/client', express.static(__dirname + '/assets')) in main.js. then fix your template links to match the new paths: /admin/css/style.css and /client/css/style.css