title: PlayFramework: How to safely integrate Bootstrap theme with Require.js
body: <p>In Playframework 2.1 - Asycronous Module Definition (AMD) was introduced &amp; supported with Require.js</p>
  
  <p>Yet there is a lack of official Play Documentation besides the overview:
  <a href="http://www.playframework.com/documentation/2.1.0/RequireJS-support" rel="nofollow">http://www.playframework.com/documentation/2.1.0/RequireJS-support</a></p>
  
  <p>I am looking to put together a tutorial on the best practices of supporting Bootstrap themes with Require.js</p>
  
  <p>The code base for bootstrap, jquery spans across multiple files:</p>
  
  <pre><code>jquery.js 
        jquery.dataTable.js
        jquery-ui.custom.js
        ...
  bootstrap.js
        bootstrap.colorpicker.js
        bootstrap.tooltip.js
        ...
  Over 30 of these Bootstrap themed files needs to be managed. 
  </code></pre>
  
  <p>In <code>app/assets/js</code>, I have:</p>
  
  <pre><code>requirejs.config({
      baseUrl: "assets/javascripts/lib",
      paths: {
          "jquery": ["http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min",
              //If the CDN location fails, load from this location
              'jquery-1.10.1.min'
          ],
          "bootstrap" : ['bootstrap.min'],
  
      },
      shim : {
          "bootstrap" : ['jquery'],
          "jquery.dataTables" : ['jquery'],
          "jquery-ui.custom" : ['jquery'],
          'jquery.uniform' : ['jquery'],
          'excanvas' : ['jquery'],
          'jquery.flot.min' : ['jquery'],
          'jquery.flot.resize.min' : ['jquery'],
          'jquery.peity.min' : ['jquery'],
          'select2' : ['jquery'],
          'unicorn' : ['jquery', 'bootstrap'],
          'unicorn.dashboard' : ['jquery', 'bootstrap'],
          'unicorn.tables' : ['jquery', 'bootstrap']
      }
  });
  </code></pre>
  
  <p>In <code>project/Build.scala</code>, the requireJs is appended to main:</p>
  
  <pre><code>val main = play.Project(appName, appVersion, appDependencies).settings(
      requireJs += "main.js",
      requireJsShim += "main.js",
      requireJsFolder := "js"
  )
  </code></pre>
  
  <p>In my template, <code>app/views/main.scala.html</code>, the helper is invoked:</p>
  
  <pre><code>@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("js/main").url)
  </code></pre>
  
  <p>I have many template pages that routes from main.scala.html, right now the helper gets called once per page. Therefore I'm running into <strong>baseUrl</strong> errors:</p>
  
  <pre><code>GET http://localhost:9000/admin/assets/javascripts/lib/bootstrap.min.js 404 (Not Found) require.js:33
  GET http://localhost:9000/admin/assets/javascripts/lib/jquery.dataTables.js 404 (Not Found) require.js:33
  GET http://localhost:9000/admin/assets/javascripts/lib/jquery.uniform.js 404 (Not Found) require.js:33
  GET http://localhost:9000/admin/assets/javascripts/lib/jquery-ui.custom.js 404 (Not Found) require.js:33
  GET http://localhost:9000/admin/assets/javascripts/lib/select2.js 404 (Not Found) require.js:33
  GET http://localhost:9000/admin/assets/javascripts/lib/excanvas.js 404 (Not Found) 
  </code></pre>
  
  <p>Is there a best practice for safely integrating Boostrap in PlayFramework with Require.js?</p>