How to make Django, Backbone and RequireJS working together

Both Django and RequireJs are making great efforts to decoupling apps (python level) and modules (javascript level).. but when we try to glue them together with Backbone, things get a bit uglier than I originally in my mind. This tutorial will guide you (Django developers) through the most tricky parts to make those three working together as clean as possible.

If you used Backbone and RequireJS before, you probably familar the Thomas Davis’ tutorial Organizing your application using Modules (require.js), which is a great starter for us to integrate into Django. If you haven’t checkout that tutorial, please do go through it before continues on this one.

Now, assuming you are conformable with RequireJs and Backbone, let’s go for it with Django.

Step 1, setup static file structure by using Django’s Staticfiles finder.

Note: The locations of  the following described directory do not really matters because at the end it will all merge into your root static directory by using manage.py collectstatics.

We will create three statics directories and each of the directory server for different purpose.

1. /share_statics/ -  to put all library files such as requireJS, backbone, JQuery etc…
2. /your-project/statics/ - to hold your main project specific statics file such as apps.js, main.js and router.js, we will go for a bit more detail later.
3. /your-app/statics/ - finally, a static directory for your app, this directory will hold all your backbone view.js, models.js and router.js.

 Step 2, config your settings file to reflects the static structures

STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.

'/your-project/statics', #
('libs',  '/shared_statics'), #lib static
('your-app',  '/your-app/statics'),
)

Step 3, decouple your main router for each apps

// Filename: main /your_project/js/router.js, we will decouple this router to each application.
define(['backbone', '../your-app/js/router', '../your-app-2/js/router'], function(Backbone, YourAppRouter, YourAppRouter2){ 
    var AppRouter = Backbone.Router.extend({
        initialize:function(){
        console.log('init app router');
        var router = this;

        //initial all your apps routers here.  
        new YourAppRouter();
        new YourAppRouter2(); 
     },

    routes: {
        '*actions': '_default'
    },

    _default : function(){
        console.log('unable to route this request');
        return;
    }
});

var initialize = function(){
    var app_router = new AppRouter;
};

return {initialize: initialize};
});

OK, we are almost done… In your-app directory, you can develop as your normally would do for backbones apps, build your models.js, your router.js and your view.js… Just one thing to keep in mind, since we decoupled the router.js to each apps, your app’s router cannot have ‘*actions’: ‘_default’ defined or it will conflicts with the main project router.

By doing the above static config, you should be able to run your project on debug mode with no problem. We will now move to deployment part.

Step 4, Deployment

The coolest things for this part are: it is really really simple… Just run django’s default command  python manage.py collectstatics . Django will automatically merge all your statics files into one root statics locations. From there, you are able to optimize your js code to a single file just like you would normally do to optimize  a RequireJs project. How to optimize requireJS or how to deploy your statics are out of the scope.  Both RequireJs and Django provided excellent articles to cover those two questions. You can read more about it at

• Optimize RequireJS project
• Deploying static files in a nutshell

If your still having issues, feel free to email your questions to i@scottwang.net.