title: How to set up a simple Backbone/Marionette project and their dependencies using require.js
body: <p>I've been reading a lot on this, and even bought a book specifically on setting up marionette apps with require.js, and followed <a href="https://github.com/marionettejs/backbone.marionette/wiki/Using-marionette-with-requirejs" rel="nofollow">this</a> little how-to on github which seemed pretty straightforward...  However for some reason I can't seem to get something as simple as starting an empty Marionette project to work!</p>
  
  <p>My project is structured like so:</p>
  
  <ul>
  <li>Root Directory
  <ul>
  <li>models</li>
  <li>views</li>
  <li>libs
  <ul>
  <li>babysitter.js</li>
  <li>backbone.js</li>
  <li>jquery.js</li>
  <li>marionette.js</li>
  <li>require.js</li>
  <li>text.js</li>
  <li>tpl.js</li>
  <li>underscore.js</li>
  <li>wreqr.js</li>
  </ul></li>
  <li>collections</li>
  <li>templates</li>
  <li>index.html</li>
  <li>main.js</li>
  </ul></li>
  </ul>
  
  <p>Here's my index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script data-main="main" src="libs/require.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my main.js:</p>
  
  <pre><code>require.config({
      paths:{
      jquery:"libs/jquery",
      underscore: "libs/underscore",
      backbone: "libs/backbone",
      text: "libs/text",
      tpl: "libs/tpl",
      marionette: 'libs/marionette',
      'backbone.wreqr' : 'libs/wreqr',
      'backbone.babysitter' : 'libs/babysitter'
      },
      shim:{
      underscore:{
          exports: "_"
      },
      backbone:{
          deps: ['underscore','jquery'],
          exports:'Backbone'
      }
      }
  });
  
  require(['marionette'],function(Marionette){
  
  
  var Application = new Marionette.Application();
  
  Application.on("initialize:after", function(){
      alert("Application has started!");
  });
  
      Application.start();
  });
  </code></pre>
  
  <p>I downloaded the AMD / RequireJS version of Marionette.js from their <a href="http://marionettejs.com" rel="nofollow">site</a></p>
  
  <p>Upon opening up index.html in a browser, I see an error in the console "Reference Error: Backbone is not defined" (on marionette.js line 20)</p>
  
  <p>What am I doing wrong?</p>