Frontend and Backend with express Frontend and Backend with express express express

Frontend and Backend with express


The issue that the backend stylesheet is served by express is a consequence of how express handles requests in conjunction with your application architecture.

A web browser requests a stylesheet /css/site.css express accepts this request and processes all middleware and routers. Since you set up your main app like this

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

The backend app first handles the request. Since you've registered the static middleware in your backend app

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

the stylesheet /css/site.css is served from your backend app if this stylesheet exists. This happens for every middleware and route. So any route or asset (css, image) that is requested by a client will be first processed by your backend app. As a consequence routes and assets in the backend app will "hide" routes and assets in your frontend app if they are served via the same route.

A simple solution to your problem would be that you're not serving backend and frontend apps from your main app but to start two express apps 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');});