Express Shared Routes

Named routes for the express framework that are shared between the server and the browser.

This is a minimalistic library (around 200 lines of code) that allows you to softcode your routes and ease the creation of navigation components like menus and breadcrumbs. The routes are normally defined in the server and can be exported to the browser (if you need client side rendering of links). The library has no dependencies in the browser, weights 370 Bytes gziped and is coded using a UMD pattern, so you can use it directly or with RequireJS.

Name your routes

So, your routes probably look something like this

// Normal express Route
app.get('/hello', function(req, res){
    res.send('hello world');
});

The library allows you to add a name to your routes, so you can easily reference them.

// Our way
routes.get({name: "hello", re: '/hello'}, function(req, res){
    res.send('hello world');
});

The routes are Javascript Object Literals, that must have at least a name, and a regular expresion (re).

Create links

Instead of using hardcoded links like this var href = '/hello/' + name, you can reference a named route, and pass parameters to it. The parameter definition comes from the express route definition.

routes.get({name: "named-hello", re: '/hello/:name'}, function(req, res){
    // Soft coded link
    var href = routes.getLink ('named-hello', {name: 'Handsome'});

    var response = "Hello " + req.param('name');
    response += " <a href='"+ href + "'>Link</a>";
    res.send(response);
});

Notice that getLink is using the named route, so if we change the route's regular expression to something like "/sayhello/:name", all the links will reflect the change.

Add hierarchy

URL's are hierarchal by nature, so are your routes.

Suposse you have an admin page that allows you to list and edit users, you probably have the following URL's

• /admin: Dashboard of the admin
• /admin/user: A list of users with the possible actions
• /admin/user/:id/edit: Edit user form

We can define that structure using the routes:

routes.get({
    name: "admin",
    re: '/admin',
    handler: function(req, res){
        res.send('Admin dashboard');
    }
});

routes.get({
    name: "admin_user_list",
    re: '/user',
    parent: routes.getRoute('admin'),
    handler: function(req, res){
        res.send('List of users');
    }
});

routes.get({
    name: "admin_user_edit",
    re: '/:id/edit',
    parent: routes.getRoute('admin_user_list'),
    handler: function(req, res){
        res.send('Edit form');
    }
});

The parent property is the parent Route (a Javascript Object Literal), and indicates that our re depends on our ancestors.

In here we also show another way to define the route handler. Instead of adding it after the Javascript Object (the Route), we add it as a property.

Take it for a spin

You got this far and you are still interested? Check out how to install and bootstrap the library with this Basic Example.

Once you learn the basics, check out how to create a menu bar and share your routes with the client. Are you using RequireJS? Here is the same example using AMD loader.

See how to create complex navigation like this Breadcrumb example.

What's comming?

• Add an example of how this plays with Backbone to do a Single Page Application
• Add an example of how it can be used to build a modular MVC express app
• Change the parent property to allow to use a string (the name of the route) instead of having to pass the Object Literal
• Add the ability to override a rule (could be useful for MVC)
• Maybe add prototype inheritance to the routes so it take less code to do some navigation tools

Please give feedback

Do you like the idea? Is the documentation clear? Would you like to see some new feature? or just send love

[email protected]