Add a Route in Expressjs

29th November 2016

The basic Express Skeleton Application generates two routes, the default ‘index’ (or ‘/’) route and a ‘users’ route.

This can be seen within the project’s app.js near the top.

// 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 users = require('./routes/users');

var app = express();

The index and users route files are located within the routes/ directory. To add a custom route, include a routes file by declaring a variable just underneath the existing two.

// 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 users = require('./routes/users');
var custom = require('./routes/custom');

var app = express();

By default, the Express application generator uses the jade view engine, as seen by the following line within app.js.

app.set('view engine', 'jade');

This can be changed to use the ‘ejs’ view engine as we’ll do in this example.

app.set('view engine', 'ejs');

After changing this, ensure that the ‘ejs’ node module is installed by running the following command within your project root.

npm install ejs

Remaining within the app.js file, add your custom route below the default and users routes.

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

If you haven’t already, create the custom.js routes file within the routes/ directory.

This file might look like the following:

// routes/custom.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('custom', { title: 'Express' });
});

module.exports = router;

The first parameter passed in res.render represents the name of the .ejs file used to render some content when the ‘/custom’ route is requested. So the application will be looking for a ‘custom.ejs’ file.

The .ejs files are located in a ‘views’ directory as per the configuration set in app.js.

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

The second argument passed in res.render is an object used to pass data to the .ejs template file. The example above shows we are passing a ‘title’ property with a value of ‘Express’.

Create the custom.ejs file and paste in the following contents.

// views/custom.ejs
Welcome to <%= title %>

After making the changes, run the application.

node app.js

Now if you head to the ‘/custom’ route, you should see the following.

Note the use of the <% %> tags to retrieve the data from the routes file. This is similar to how Windows ASP tags work. The use of the ‘=’ sign tells the application to print out the variable.

Usually the .ejs files are populated with HTML code and contain variables within the templates that are retrieved from the routes file.