Setting up Symfony2 and Backbone.js using Require.js

Question

I've got a very simple app, similar to a Todo, with an Entity called Subject.

Symfony2 will serve the REST api and the Backbone app will take care of what happens client-side. I've been trying to set up my project so that Require.js loads a base model and a set of very simple views, but I always get this error:

"NetworkError: 404 Not Found - http://localhost:8000/bundles/pfiuser/js/app/.js"

followed with

Error: Script error for: http://requirejs.org/docs/errors.html#scripterror
In require.js line 166

And finally the timeout:

Error: Load timeout for modules: http://requirejs.org/docs/errors.html#timeout

I don't know Require.js very well, but I reckon it comes from one of the defines that I do that doesn't work. Here is require's configuration (I've been basing my work off this tutorial):

requirejs.config({
    baseUrl: '{{ asset('bundles/pfiuser/js/app/')  }}',
    paths: {
        text: "vendor/requirejs-text/text",
        jquery: 'vendor/jquery/dist/jquery',
        underscore: 'vendor/underscore/underscore',
        backbone: 'vendor/backbone/backbone',
        bootstrap: 'vendor/bootstrap/dist/js/bootstrap',
        bootstrapEditable: 'vendor/bs3-editable/bootstrap-editable'
    },
    shim: {
        underscore: {
            exports: '_'
    },
    backbone: {
         deps: ['underscore', 'jquery'],
             exports: 'Backbone'
         },
         bootstrap: {
             deps: ['jquery'],
             exports: 'Bootstrap'
         }
    }
});

And then I call the app:

require([
    '{{ asset('bundles/pfiuser/js/app/app.js')  }}'
], function(App){
    App.initialize();
});

And that's in app.js it gets weird. Here is the base file:

define([
    'jquery',
    'underscore',
    'backbone',
    'router'
], function($, _, Backbone, Router){
    var initialize = function(){
        //Router.initialize();
    }

    return {
        initialize: initialize
    };
});

There I get the error. If I only comment the router (which calls other files), I still have the error. But if I comment the backbone call, I don't have the error anymore:

define([ 'jquery', 'underscore'/, 'backbone', 'router'/ ], function($, _, Backbone, Router){ var initialize = function(){ //Router.initialize(); }

return {
    initialize: initialize
};

});

The error just sounds mysterious to me, so I have no idea how to solve it. Here's my project directory structure for reference:

//In src/PFI/UserBundle/Resources/public/js/
app/
|-- collections
|      |-- subjects.js
|-- models
|      |-- subject.js
|-- templates
|      |-- subjects
|      |     |-- list.html
|-- vendor
|     //all the libraries installed via bower
|-- views
|      |-- subjects
|             |-- list.js
|-- app.js
|-- boilerplate.js
|-- main.js //(unused as I configure requirejs directly in the page layout)
|-- router.js

hanego hanego · Accepted Answer · 2015-01-21T07:20:18

I am also trying to use require with Symfony2, but I think you shouldn t do:

    require([
    '{{ asset('bundles/pfiuser/js/app/app.js')  }}'
], function(App){
    App.initialize();
});

more something like

require([
    'app'
], function(App){
    App.initialize();
});

actually your base url is already specifying the path i think, moreover, you shouldn t have .js at the end. (I saw some example with twig filter |raw|escape '.js')

Setting up Symfony2 and Backbone.js using Require.js

1 Answers