Frontend and Backend with express

Question

I am currently working on a web application using express.js. I want to have an interface and backend. The interface should display some content from the database, in the backend I want to create this content (similar to cms).

I started with this folder structure:

app/ ├── frontend/ │ ├── public //Javascript, css & images only for frontend │ ├── views //Frontend jade templates │ └── client.js │ ├── backend/ │ ├── public //Only backend css & stuff │ └── views //Backend templates │ └── core.js │ └── server.js //Starts the whole application 

.Js server

 var express = require('express'); var app = express(); var config = require('../app/config.json')[app.get('env')]; var backend = require('./backend/core'); var frontend = require('./frontend/client'); app.use(backend); app.use(frontend); app.set('port', config.port || 3000); var server = app.listen(app.get('port'), function() { console.log('Server listening on port ' + app.get('port') + ' in ' + app.get('env') + ' mode'); }); 

client.js

 var express = require('express'); var app = express(); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.static(__dirname + '/public')); app.get('/', function(req, res) { res.render('layout', {title: 'Frontpage'}); }); app.get('/about', function(req, res) { res.render('layout', {title: 'About us'}); }); module.exports = app; 

and core.js

 var express = require('express'); var app = express(); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.static(__dirname + '/public')); app.get('/login', function(req, res) { res.render('layout', {title: 'Login'}); }); app.get('/login/dashboard', function(req, res) { res.render('layout', {title: 'Dashboard'}); }); module.exports = app; 

express.js loads the correct templates, but not the correct stylesheet. For each, a backend style sheet is loaded.

 localhost:3000/about 

should load the stylesheet in

 frontend/public/css/ 

and

 localhost:3000/login 

should load css in

 backend/public/css/ 

How can i fix this?

Answer 1

The problem with express using the backend stylesheet is due to the way express requests are handled in conjunction with your application architecture.

The web browser requests the stylesheet /css/site.css , which accepts this request and processes all middleware and routers. Since you created your main application like this

 app.use(backend); app.use(frontend); 

The backend application processes the request first. Since you registered static middleware in your backend application

 app.use(express.static(__dirname + '/public')); 

the stylesheet /css/site.css is provided from your backend application if this stylesheet exists. This occurs for each intermediate layer and route. Thus, any route or resource (css, image) requested by the client will be first processed by your backend application. As a result, routes and assets in the backend application will “hide” routes and assets in your front-end application if they are served along the same route.

A simple solution to your problem is that you do not use the backend and external applications from the main application, but to run two express applications in server.js :

 var config = require('../app/config.json')[process.env.NODE_ENV]; var backend = require('./backend/core'); backend.set('port', config.backend.port || 3000); var backendServer = backend.listen(backend.get('port'), function() { console.log('Backend server listening on port ' + backend.get('port') + ' in ' + backend.get('env') + ' mode'); }); var frontend = require('./frontend/client'); frontend.set('port', config.frontend.port || 3001); var frontendServer = frontend.listen(frontend.get('port'), function() { console.log('Frontend server listening on port ' + frontend.get('port') + ' in ' + frontend.get('env') + ' mode'); });