Express 4 with Handlebars add new Route

Question

Express 4 with Handlebars add new Route

I am trying to add an "about" page to my new express app.

I am running express 4 with handlebars (hbs).

I have read through a number of tutorials but most don't go into adding a new route (or do but don't explain very well) I have been working from this tutorial primarily.

I need to know what to add to my app.js and my routes/ folder, I have about.hbs ready in views.

here is my app.js (generated by express generator):

var express = require('express');
var path = require('path');
var favicon = require('static-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 app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

/// 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;

and my routes/ folder contains index.js and users.js.

index.js:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Sorry for simplicity of question, but I have spent 3 hours on this already and I feelit is probably a fairly easy thing to do.

node.js
express
routes
views
handlebars.js

Answer 1

I suggest you ditch the general default express generated application and create a proper routing system. Your app.js file should not contain routing, only environment variables. Here is the way I've setup my projects:

App.js

var express     = require('express');
var http        = require('http');
var path        = require('path');
var compression = require('compression');
var app         = module.exports = express();
var cacheTime   = 86400000*7; //a week

//all environments
app.use(compression());
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.engine('html', require('hogan-express'));
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public',{ maxAge: cacheTime }));

//development only
if ('development' === app.get('env')) {
  app.use(express.errorHandler());
}

require('./routes/index.js');

http.createServer(app).listen(app.get('port'), function(req,res){
    console.log('Express server listening on port ' + app.get('port'));
});

The routes file:

var app = require('../app.js');

app.get('/Contact', function(req, res) {
    res.render('contact.html', { /*object*/ });
});

//continue routes here

It's scalable and a viable option for large company projects. You may also split up the routes file into sepererate sections to organize better. Note: You will need to change some of my settings to your liking