Enable pushState without hash using backbone and express-handlebars - backbone.js

Question

I am using https://github.com/shorttompkins/benm and I want to implement pushState without using a hash. I have set:
Backbone.history.start({pushState: true});
Here's my server.js:
var express = require('express'),
http = require('http'),
path = require('path'),
routes = require('./app/routes'),
exphbs = require('express-handlebars'),
mongoose = require('mongoose'),
seeder = require('./app/seeder'),
app = express(),
bodyParser = require('body-parser'),
morgan = require('morgan'),
methodOverride = require('method-override'),
errorHandler = require('errorhandler');
app.set('port', process.env.PORT || 3300);
app.set('views', __dirname + '/views');
app.engine('handlebars', exphbs({
defaultLayout: 'main',
layoutsDir: app.get('views') + '/layouts'
}));
app.set('view engine', 'handlebars');
app.use(morgan('dev'));
app.use(bodyParser());
app.use(methodOverride());
routes.initialize(app, new express.Router());
// static asset routes
app.use('/', express.static(path.join(__dirname, 'public')));
app.use('/bower_components', express.static(path.join(__dirname, 'bower_components')));
// development only
if ('development' === app.get('env')) {
app.use(errorHandler());
}
//connect to the db server:
mongoose.connect('mongodb://localhost/MyApp');
mongoose.connection.on('open', function() {
console.log('Connected to Mongoose.');
// check if the db is empty, if so seed it with some contacts:
seeder.check();
});
//routes list:
routes.initialize(app);
//finally boot up the server:
http.createServer(app).listen(app.get('port'), function() {
console.log('Server up: http://localhost:' + app.get('port'));
});
And my routes.js:
var home = require('../controllers/home'),
contacts = require('../controllers/contacts');
module.exports.initialize = function(app) {
app.get('/', home.index);
app.get('/api/contacts', contacts.index);
app.get('/api/contacts/:id', contacts.getById);
app.post('/api/contacts', contacts.add);
app.delete('/api/contacts/:id', contacts.delete);
};
This works fine until I try to refresh a page with a backbone route eg. http://localhost:3300/add then the route is not found and I get an error 'Cannot GET /add'.
From what I've read I need to add a catch-all route similar to:
app.get('*', function(req, res){
// serve home page
});
But I can't work how how to do this with express-handlebars.
Everything I've tried seems to stop the static content being served even though I've got the express.static routes in server.js
Anyone help would be much appreciated.

Answer 1

When using pushstate the browser won't request the URL added through pushState() but might do when reloading the page or restarting the useragent at that location.
From the Mozilla Developer Network:
URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. [...]
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState%28%29_method
This applies to all user agents.
The idea of pushstate is, to store state objects for an URL while not requesting that document. However, when the user agent is requested to load that URL after the previous browsing session was destroyed, the server needs to be able to serve that URL. Note that a user might also bookmark or send the URL via e-mail to another person.
Your server and client should be able to initialize the application state accoring to that URL.
Since you said, you
prefer to have standard URLs and reserve the hash for drilling into view content likes tabs, ids, etc.
your best option seems to be to implement routes in your backend. All routes "generated" in your frontend should be served. Your single page application document needs to be served for any of those URLs.
If your application should initialize/start at the correct point, you need to either
pass the current state information from your backend to the client side application
recover the state from the URL at which the application was started on the client side
Given the current route /contacts/24552,
For option 1: you could, for example, handle the route, gather the contact data for 24552 and serve the single page application document with that contact data inlined.
For option 2: you could serve the single page application document as is for any route (except the API routes), examine the URL clientside and do the request client side. For example, you could parse location.pathname, extract relevant information (e.g. "contacts" and the ID) and either directly call the route handler or navigate to an unhandled route and back to the route /contacts/24552 to trigger the route handler.
Note: you may also use hash based URLs when using anchors in your content. You may generate those anchor names (IDs) and prefix them with the current application state route. Your Backbone route handlers have to ignore those anchor names.