We Keep Coding

Node sub-route returning 404

I have just started using node.js with the Express framework, and I am trying to understand how the built in routing works. I have found that a "main" router can be defined from which other "sub-routes" are used. For now, my app initially makes a get request that loads a dropdown from a MySQL database. I added a demo button that should take the value in the dropdown and make a request with it as a query parameter to my sub-route. When the button is clicked for the sub-route, I am getting a 404. My app.js:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
My index.js (main route):
var express = require('express');
var router = express.Router();
var models = require('../models');
router.use('/savings', require('./savings.js'));
/* GET home page with locations and their initial data collection dates */
router.get('/', function(req, res, next) {
models.Location.findAll({
attributes: ['locationName', 'initializationDate']
}).then(function(locations) {
res.render('index', {
title: 'Solar Data Savings',
locations: locations
});
});
});
module.exports = router;
savings.js (sub-route):
var express = require('express');
var router = express.Router();
var models = require('../models');
/* GET calculate solar data savings and reroute */
router.get('/savings', function(req, res, next) {
req.param('locationID');
models.Bank.findAll({
attributes: ['bankID'],
include: [{
model: Location,
where: { locationID: Sequelize.col('bank.locationID') }
}]
}).then(function(banks) {
res.render('index', {
title: 'Solar Data Savings',
banks: banks
});
});
});
module.exports = router;
index.pug:
extends layout
block content
div(class="container-fluid")
h1= title
p This is the #{title} project website
form(action="/savings")
div(class="form-group")
label(for="locations")
div(class="col-sm-4")
select(id="locations" class="form-control")
-for(var i = 0; i < locations.length; i++) {
option(value="#{locations[i].dataValues.locationID") #{locations[i].getLocationName()}
-}
div(class="col-sm-4")
input(type="submit", value="Get Bank")
I believe I am misunderstanding a nuance to routing, and I've scoured the web for a solution to this particular problem with no luck. Help greatly appreciated

Your savings route on the server is set to /savings/savings whereas your form is calling /savings. Either change the form or change the server side:
In savings.js, change
router.get('/savings', function(req....
to
router.get('/', function(req....
Also, you are using get to submit a form. Maybe you need to change that to
router.post('/', function(req...

Just make following changes in index.pug :
extends layout
block content
div(class="container-fluid")
h1= title
p This is the #{title} project website
form(action="/savings/savings")
div(class="form-group")
label(for="locations")
div(class="col-sm-4")
select(id="locations" class="form-control")
-for(var i = 0; i < locations.length; i++) {
option(value="#{locations[i].dataValues.locationID") #{locations[i].getLocationName()}
-}
div(class="col-sm-4")
input(type="submit", value="Get Bank")
Actually your routing is wrong:
Currently you're calling as : your_url:port/savings
BUT Should be : your_url:port/savings/savings
LINE NEEDS CORRECTION
FROM : form(action="/savings")
TO : form(action="/savings/savings")

How to properly apply routes inside another file

I'm fairly new to express js and I want to know how to use router. I created a file named categories.js inside routes directory with this code.
categories.js code:
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/categories', function(req, res) {
res.send('this is the category');
});
module.exports = router;
inside the app.js i have this code:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var categories = require('./routes/categories');
var app = express();
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/categories', categories);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I have tried understand what is wrong but i can't see to figure out. thanks in advance.
This is the error im getting
Not Found
404
I will like to add inside the routes directory i have a index.js file and this one works.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
I think my application is not reading the categories.js file, because when I put the category.js code inside index.js it works. but it doesn't work if i put it in a separate file in my case category.js.

I think you've got your categories route hooked up wrong, your categories are mapped to /categories/categories in your code. To fix it, try this in your app.js:
app.use('/', categories);
If you don't want to prefix, you can also simply do this:
app.use(categories);

Express Routing: 404 on some route names, but not others?

I'm making a single page app with Angular routes on the front end, but the backend is giving me grief.
All the routes that involve interfacing with the database work, but when I add in a route (Copying the exact same structure) to send an html file, or just hello world, it returns a 404, not even registering on the node console (with one weird exceptions noted below).
I read this post explaining how static should come after routes, it makes sense, but it's not working on my code.
app.js is as follows:
// SETUP
var express = require('express');
var app = express();
var router = express.Router();
var mongoose = require('mongoose');
var port = process.env.PORT || 3001;
var database = 'mongodb://example-database...';
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
// CONFIG
mongoose.connect(database);
// Note: response parser must be placed before routing
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set('jsonp callback name', 'cb');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(router);
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
next();
});
// ROUTES
require("./routes/api_chirp.js")(router);
require("./routes/api_video.js")(router);
require("./routes/api_interaction.js")(router);
require("./routes/api_user.js")(router);
require("./routes/api_search.js")(router);
require("./routes/api_jsonp.js")(router);
require("./routes/index.js")(router);
app.use(express.static(path.join(__dirname, 'public')));
// ERROR HANDLING
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
module.exports = app;
app.listen(port);
console.log("App listening on port " + port);
index.js (Note: The same structure used in other working API routes (using an alternative route, i.e. "/api/someroute")
module.exports = function(router) {
router.route('/workspace') // Only works if route is prefixed with "api_someword", "someword" itself won't work.
.get(function(req, res) {
console.log('request received');
res.send('hello world');
}); // Ends - Post
};
Question: I'm at the end of my rope... ANY suggestions, answers will help at this point. How do I get that route in index.js working?

// ROUTES
require("./routes/api_chirp.js")(router);
require("./routes/api_video.js")(router);
require("./routes/api_interaction.js")(router);
require("./routes/api_user.js")(router);
require("./routes/api_search.js")(router);
require("./routes/api_jsonp.js")(router);
require("./routes/index.js")(router);
pass the app object like this
// ROUTES
require("./routes/api_chirp.js")(app);
require("./routes/api_video.js")(app);
require("./routes/api_interaction.js")(app);
require("./routes/api_user.js")(app);
require("./routes/api_search.js")(app);
require("./routes/api_jsonp.js")(app);
require("./routes/index.js")(app);

Solved:
Another developer putting a path filter on nginx that prevented any url that didn't have isn't prefixed with /api to get through to node. I added it and it solved the problem.

Express sub-apps not working

I'm trying to make my main app be able to dynamically add other sub-apps so that I can do something like '/user/appName' where appName is the name of the sub-app. In my project directory I have an 'apps' directory that will contain all the sub-apps (they will all have their own app.js). I made a simple function to do this and it works if I comment out all the error handling stuff. However, I would still like to use error handling.
I call the useApp function from a post method in the main app.
I've search and tried many things, but can't find anything where someone is trying to do something similar. Maybe I'm going about this the wrong way?
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes');
var login = require('./routes/login');
var user = require('./routes/user');
var admin = require('./routes/administrator');
var networkView = require('./routes/networkView');
var app = express();
//view engine setup
app.set('views', path.join(__dirname, 'views'));
/** if you want hogan to use ".html" file extension
app.engine('html', require('hjs').renderFile);
app.set('view engine', 'html');
**/
app.set('view engine', 'hjs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/login', login);
app.use('/user', user);
app.use('/admin', admin);
app.use('/networkView', networkView);
// import a sub app
function useApp(appName) {
app.use('/user/' + appName, require('./apps/' + appName + '/app'));
}
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
exports.useApp = useApp;
module.exports = app;

I did some research on how express works. The problem is that the app.use() in my function adds the route to the end of the stack. And therefore is not reachable. I came up with the following solution:
/**
* function that allows sub apps to be added to this app dynamically (when the server is running)
* #param appName
*/
function useApp(appName) {
// add the route
app.use('/user/' + appName, require('./apps/' + appName + '/app'));
// put the new route before the 404 catch on the router stack
// this assumes there are 3 other routes after this one (len - 4)
var last = app._router.stack[app._router.stack.length - 1];
delete app._router.stack[app._router.stack.length - 1];
app._router.stack.splice(app._router.stack.length - 4, 0, last);
}
It moves the new route in the proper location in the stack, so it becomes reachable.
Not sure if it's the best approach, but it works.

I've built something to accomplish just that. Feel free to take a look:
https://github.com/tkiddle/expressPlate/tree/tkiddle
Make sure you're on the "tkiddle" branch.

Express 404 error message instead of routing to index.jade

for some reason I am getting a 404 error message instead of my index.jade content fed into my index page. I don't know what I am doing wrong here but this getting boring.
Here's my app.js
var express = require('express');
var path = require('path');
var routes = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.get('/', function(req, res){
res.render('index.jade', {title: 'index'});
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
module.exports = app;
Here's my index.js
/* GET home page. */
exports.index = function(req, res){
res.render('index', { title: 'Express' });
};
Any assistance is much appreciated!

Actually, I ended up solving this problem by upgrading to express 4 from express 3. Now it works fine. :)