Backbone route doesn't works without hashes

Question

My backbone routes works well when I grunt serve my app, but when I upload it, routes are all messed up.

The homepage works well, but when I wanna navigate (ex: http://quentin-morisseau.me/capucime) I land on the 404 page.

If I add a # (ex: http://quentin-morisseau.me/#capucime), I get rerouted without the hashe as the link should work, and finally get the page.

Then, if I reload my page, I also get a 404 page.

I also have the pushstate at true.

Here is my code :

main.js :

    'use strict';

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
            'underscore',
            'jquery'
            ],
            exports: 'Backbone'
        }
    },
    paths: {
        jquery: '../bower_components/jquery/jquery',
        backbone: '../bower_components/backbone/backbone',
        underscore: '../bower_components/underscore/underscore',
        text: '../bower_components/requirejs-text/text',
        requirejs: '../bower_components/requirejs/require'
    }
});

define(['my-app', 'jquery'], function(Q, $){
    Q.start();
});

my-app.js :

'use strict';
define(['backbone', 'jquery'], function(Backbone, $){
    var Q = {
        Views: {},
        Models: {},
        Collections: {},
        Router: {},
        Status: {},
        init: function(){
            Q.Router = new (Backbone.Router.extend({
                routes: {
                    '': 'home',
                    'capucime': 'capucime',
                    'lequipe': 'lequipe',
                    'nathaniel': 'nathaniel',
                    'comptoir': 'comptoir'
                },

                initialize: function(){
                    Backbone.history.start({pushState: true, root: '/'});
                },

                home: function(){
                    require(['views/home'], function(View){ 
                        var Home = new View();
                        Home.render();
                    })
                },

                capucime: function(){
                    require(['views/capucime'], function(View){ 
                        var Capucime = new View();
                        Capucime.render();
                    })
                },

                lequipe: function(){
                    require(['views/lequipe'], function(View){ 
                        var Lequipe = new View();
                        Lequipe.render();
                    })
                },

                nathaniel: function(){
                    require(['views/nathaniel'], function(View){ 
                        var Nathaniel = new View();
                        Nathaniel.render();
                    })
                },

                comptoir: function(){
                    require(['views/comptoir'], function(View){ 
                        var Comptoir = new View();
                        Comptoir.render();
                    })
                }
            }));
        },
        start: function(){ Q.init(); }
    };
    return Q;
});

Thanks for helping me figure it out :)

Quentin.

EDIT :

Found the answer about the .htaccess, if anybody has the same problem :

# ----------------------------------------------------------------------
# HTML5 pushstate (history) support:
# ----------------------------------------------------------------------

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

This is a known problem, I guess ...

Thanks guys, btw.

Answer 1

You should set up your web server to route to your index page no matter what, a "catch-all" route, where all your javascript is loaded from, and it will work properly.

so when you hit /capucime you should serve your index page e.g. index.html, and let the javascript load the correct page.

You grunt serve script has setup such catch-all route, but your have to configure this on you webserver in production, in order to get your one-page-app/single-page-app to work.