NodeJS / Express / Mean Stack

Question

I am new to Express and semi-new to nodejs and I am trying to run a simple app / webserver as a proof of concept. I have been stuck for hours because my server serves every file as index.html (with the content of index.html).

In my index.html I am making calls to JS files and CSS files and they are all coming back but with a 200 in the console but they are all coming back with index.html content instead of the actual content contained in them. I believe the problem is in my server.js file which is below:

// server.js

// modules =================================================
var express = require('express');
var app     = express();
var mongoose= require('mongoose');
var path = require('path');

// configuration ===========================================

// config files
var db = require('../config/db');

var port = process.env.PORT || 9999; // set our port
//mongoose.connect(db.url); // connect to our mongoDB database (uncomment after you enter in your own credentials in config/db.js)

app.configure(function() {
app.use(express.static(__dirname + '/public'));     // set the static files location     /public/img will be /img for users
app.use(express.logger('dev'));                     // log every request to the console
app.use(express.bodyParser());                      // have the ability to pull information from html in POST
app.use(express.methodOverride());                  // have the ability to simulate DELETE and PUT
});

// routes ==================================================
require('../../app/routes')(app); // configure our routes

// start app ===============================================
app.listen(port);                                                // startup our app at http://localhost:9999
console.log('Magic happens on port ' + port);           // shoutout to the user
exports = module.exports = app;                         // expose app

// app/routes.js

module.exports = function(app) {

// server routes ===========================================================
// handle things like api calls
// authentication routes

// sample api route
app.get('/api/nerds', function(req, res) {
    // use mongoose to get all nerds in the database
    Nerd.find(function(err, nerds) {

        // if there is an error retrieving, send the error. nothing after res.send(err) will execute
        if (err)
            res.send(err);

        res.json(nerds); // return all nerds in JSON format
    });
});

// route to handle creating (app.post)
// route to handle delete (app.delete)

// frontend routes =========================================================
// route to handle all angular requests
app.get('*', function(req, res) {
    res.sendfile('/Users/...../app/public/index.html'); // load our public/index.html file
    //res.sendfile(path, {'root': '../'});
});

};

I have been following this tutorial verbatum: http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application but haven't had much success.

Answer 1

I cannot confirm without looking at your computer but I get the feeling the paths in your application are wrong.

The crucial parts in the express setup are:

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

and

app.get('*', function(req, res) { res.sendfile('/Users/...../app/public/index.html');

The first rule catches and returns any static file in __dirname + '/public' .
The second returns index.html for anything else.

The problem is that your server.js is not in the apps directory (I can see this since you use ../../app/routes.js to get to routes.js ) this means __dirname + '/public' is not pointing to the public directory. Which is why your static files are being served by the global rule in routes.js .

In order to fix this change __dirname + '/public' to ../../app/public , or better yet place your server.js file where it should be and update your paths.
I can also see you are using an absolute full path to index.html in routes.js instead of a relative one so it seems as if your applications needs to tidied out.

Answer 2

The tutorial that you are following contains this route

app.get('*', function(req, res) {
  res.sendfile('./public/index.html'); // load our public/index.html file
});

which explicitly defines the behaviour you described.

In this tutorial it makes sense because it explains how to build a single page application. This type of the application typically returns the same content for all the request while the actual presentation work happens on the client by the client-side library (angular in this example).

So if you what to serve more pages with different content you need to add more routes for them, just like route for /api/nerds in the example.

Update:

After clarifying that the issue is incorrectly served CSS and JS files, the proposed solution is to check the location of the server.js - it should be in the folder together with the folder "public".