Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Account for Backbone.js pushState routes with node.js express server?

Account for Backbone.js pushState routes with node.js express server?

Problem

pushState support was introduced with Backbone.js' version 0.5 update.

From the backbone documentation:

Note that using real URLs requires your web Server to be able to correctly render those pages, so back-end changes are required as well. For example, if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly. For full search-engine crawlability, it's best to have the server generate the complete HTML for the page ... but if it's a web application, just rendering the same content you would have for the root URL, and filling in the rest with Backbone Views and JavaScript works fine.

This may seem like a trivial question, but I'm wondering if anyone can help me with some specific (preferably express) node.js server code. How should I go about handling these routes? I'm a little confused.

Here's the relevant excerpt from my app's router module:

var Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'about': 'about'
    },
    index: function() {
        indexView.render();
    },
    about: function() {
        aboutView.render();
    }
});

var initialize = function() {
    var router = new Router;
    Backbone.history.start({ pushState: true });
}

return {
    initialize: initialize
};

I only have a top-level route and a route for an about page here. So how should I set up a node server that will allow me to navigate to:

domain.com
domain.com/about
domain.com/#/about // 
Problem courtesy of: swaggler

Solution

Explanation

First, you need to know that domain.com/#/about will call the '/' route of your server because it doesn't read the # fragment. Your server will render the base of your Backbone.js application and Backbone will trigger the 'about' route.

So, you need to declare two routes in Express JS:

  • /
  • /about

Code

app.get('/', function(req, res) {
    // Trigger the routes 'domain.com' and 'domain.com/#/about'
    // Here render the base of your application
});

app.get('/about', function (req, res) {
    // Trigger the route 'domain.com/about'
    // Here use templates to generate the right view and render
});

I recommend you 3 links for SEO compatibility with Backbone.js by Derick Bailey:

  • SEO And Accessibility With HTML5 PushState, Part 1: Introducing PushState: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/
  • SEO And Accessibility With HTML5 PushState, Part 2: Progressive Enhancement With Backbone.js: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/
  • SEO And Accessibility With HTML5 PushState, Part 3: The Video: http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/
Solution courtesy of: Atinux

Discussion

View additional discussion.



This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Account for Backbone.js pushState routes with node.js express server?

×

Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription

×