Node / Express - Serve-static not working / How to use routes with serve-static files

Question

I'm having some trouble with routing and serving static files.

My directory structure is like this:

app/
--server.js
--controllers/
--directives/
--etc.
assets/
--img/
--css/
--etc.
views/
--partials/
  --view1.jade
  --view2.jade
--index.jade
--layout.jade
--etc.

I'd like this to happen:

• app/ - Serve static files (for example, "GET /app/controllers/controller.js" should send the literal file)
• assets/ - Serve static files (for example, "GET /assets/css/custom.css" should send the literal file)
• views/ - Dynamic routing (for example, "GET /partials/view1" uses the routing rules I have set up)

This is how I've set up my server:

  ...
//PATHS:
  var viewsPath = path.join(__dirname, '..', 'views');
  var appPath = path.join(__dirname, '..', 'app');
  var assetsPath = path.join(__dirname, '..', 'assets');
  ...
//SERVE-STATIC:
  app.set('views', viewsPath);
  app.use(serveStatic(appPath));
  app.use(serveStatic(assetsPath));
  ...
//ROUTES:
  // serve index and view partials
  app.get('/', routes.index);

  //Partials
  app.get('/partials/:name', routes.partials);
 ...

But this is what happens when I visit the index:

[.../app]$ node app.server.js 
**Node Version:  v0.12.2
**Express Version:  4.12.3
Path to views:  /myproject/views
Static serving:  /myproject/app
Static serving:  /myproject/assets
Express server listening on port 3000
GET / 304 765.837 ms - -
GET /assets/css/app.css 404 9.851 ms - 31
GET /assets/css/bootstrap.min.css 404 1.837 ms - 41
GET /assets/css/bootstrap-theme.min.css 404 0.569 ms - 47
GET /assets/css/custom.css 404 0.787 ms - 34
GET /assets/libs/angular/angular.min.js 404 0.458 ms - 47
GET /app/app.modules.js 404 0.639 ms - 31
GET /app/services/services.js 404 0.560 ms - 37
GET /app/controllers/controllers.js 404 1.474 ms - 43
GET /app/filters/filters.js 404 0.662 ms - 35
GET /app/directives/directives.js 404 1.853 ms - 41
GET /assets/js/jquery.min.js 404 3.824 ms - 36
GET /assets/js/bootstrap.min.js 404 0.804 ms - 39
GET /assets/libs/angular/angular-bootstrap.min.js 404 0.624 ms - 57
GET /assets/libs/angular/angular-bootstrap-prettify.min.js 404 0.721 ms - 66
GET /assets/img/logo.png 404 0.465 ms - 39
GET /favicon.ico 404 1.216 ms - 24

The "views" part works, but the "assets" and "app" parts don't work.

How do I set up the "serve-static" part to work? Do I still need a route even-though it's listed to serve static files? Would I still need to set up a route and do "sendFile"?

Thanks!

///////////////////////////

Update:

///////////////////////////

I tried this:

  ...
//PATHS:
  var viewsPath = path.join(__dirname, '..', 'views');
  var appPath = path.join(__dirname, '..', 'app');
  var assetsPath = path.join(__dirname, '..', 'assets');
  ...
//SERVE-STATIC:
  app.set('views', viewsPath);
  app.use(serveStatic('app', appPath)); //<--- Changed
  app.use(serveStatic('assets', assetsPath)); //<--- Changed
  ...
//ROUTES:
  // serve index and view partials
  app.get('/', routes.index);

  //Partials
  app.get('/partials/:name', routes.partials);
 ...

And also renamed "app.modules.js" to "app-modules.js" but didn't work either :/ Still getting lots of 404's:

GET / 200 645.235 ms - 1867
GET /assets/css/app.css 404 9.209 ms - 31
GET /assets/css/bootstrap.min.css 404 2.609 ms - 41
GET /assets/css/bootstrap-theme.min.css 404 1.297 ms - 47

Answer 1

To get the behavior you want, change this:

app.use(serveStatic(appPath));

...to this:

  app.use('/app', serveStatic(appPath));

The earlier code specifies serving the contents of your app directory statically, but it does not include the app part of the path. It basically means "Treat everything in appPath as if it was docroot." So, to get (e.g.) app/server.js served in your web browser, you would just go to http://example.com/server.js and not http://example.com/app/server.js. By specifying the path in app.use(), you get the behavior you want.