I’m building a web app using Express.js and need help with organizing my project structure. My goal is to create two separate sections - one for displaying content from a database (public-facing) and another for managing that content (admin panel).
My Project Layout
project/
├── public-site/
│ ├── assets //CSS, JS & images for public site
│ ├── templates //Public site jade views
│ └── routes.js
│
├── admin-panel/
│ ├── assets //Admin-only CSS & resources
│ └── templates //Admin templates
│ └── admin-routes.js
│
└── main.js //Application entry point
Main Application File (main.js)
var express = require('express');
var application = express();
var settings = require('../project/settings.json')[application.get('env')];
var adminModule = require('./admin-panel/admin-routes');
var publicModule = require('./public-site/routes');
application.use(adminModule);
application.use(publicModule);
application.set('port', settings.port || 3000);
var httpServer = application.listen(application.get('port'), function() {
console.log('Application running on port ' + application.get('port') + ' in ' + application.get('env') + ' environment');
});
Public Site Routes (routes.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('/', function(request, response) {
response.render('page', {pageTitle: 'Homepage'});
});
router.get('/contact', function(request, response) {
response.render('page', {pageTitle: 'Contact Page'});
});
module.exports = router;
Admin Panel Routes (admin-routes.js)
var express = require('express');
var adminRouter = express();
adminRouter.set('views', __dirname + '/templates');
adminRouter.set('view engine', 'jade');
adminRouter.use(express.static(__dirname + '/assets'));
adminRouter.get('/admin', function(request, response) {
response.render('page', {pageTitle: 'Admin Login'});
});
adminRouter.get('/admin/panel', function(request, response) {
response.render('page', {pageTitle: 'Control Panel'});
});
module.exports = adminRouter;
The Problem
The issue I’m facing is that Express.js serves the wrong stylesheets for different routes. All pages are loading the admin panel CSS instead of their respective stylesheets.
When I visit localhost:3000/contact
, it should use CSS from public-site/assets/css/
but instead it loads styles from admin-panel/assets/css/
.
How can I configure Express to serve the correct static files for each section of my application?