Backbone routes break on refresh with Yeoman

Question

I am building an app with Backbone and Yeoman. I am having an issue with the routing.

I have the following routes set up:

'test' : testMethod,
'' : index

I have set up pushstate:

Backbone.history.start({pushState: true});

I am using Chrome

If enter myApp.com#test the url changes to myApp.com/test and testMethod() fires correctly.

However if I try goto myApp.com/test directly or refresh after the browser has changed the url from # to / then I get a 404.

I am using the Yeoman built in server to test the pages. Could this be causing the issue?

possible duplicate of [Backbone Routes Not Being Called](http://stackoverflow.com/questions/13794944/backbone-routes-not-being-called) — McGarnagle, Dec 16 '12 at 00:20

score 3 · Accepted Answer · answered Dec 16 '12 at 06:03

I am not sure if you are using BBB within Yeoman. If you are, this should not be an issue. If you are not using BBB, this is a known issue. BBB has it's rewrite rules setup correctly to use pushstate, but yeoman's built in server does not seem to adopt this. You could edit your grunt.js file with your own rewrite rules to get pushstate working correctly. Some of the users in the above mentioned link have done this successfully.

When your app goes live, you will either need to serve those urls through your server or edit your rewrite rules to do the same. If the latter, and your application relies on SEO, SEO will suffer greatly.

Backbone routes break on refresh with Yeoman

1 Answers1