title: Frontend and Backend with express
body: <p>Currently i'm working on a web application with express.js. I want to have a frontend and backend. The frontend should show some contents from a database, in the backend i want to create this contents (similar as a cms).</p>
  
  <p>I started with this folder structure:</p>
  
  <pre><code>app/
    ├── frontend/
    │     ├── public //Javascript, css &amp; images only for frontend
    │     ├── views //Frontend jade templates
    │     └── client.js
    │
    ├── backend/
    │     ├── public //Only backend css &amp; stuff
    │     └── views //Backend templates
    │     └── core.js
    │
    └── server.js //Starts the whole application 
  </code></pre>
  
  <p>The server.js</p>
  
  <pre class="lang-js prettyprint-override"><code>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');
  });
  </code></pre>
  
  <p>the client.js</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
  </code></pre>
  
  <p>and the core.js</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
  </code></pre>
  
  <p>express.js loads the right templates but not the right stylesheet. For <strong>every</strong> route the backend stylesheet is loaded.</p>
  
  <pre><code>localhost:3000/about 
  </code></pre>
  
  <p>should load the stylesheet in </p>
  
  <pre><code>frontend/public/css/ 
  </code></pre>
  
  <p>and </p>
  
  <pre><code>localhost:3000/login
  </code></pre>
  
  <p>should load the css in </p>
  
  <pre><code>backend/public/css/
  </code></pre>
  
  <p>How can i fix this?</p>