eculver/app-config.js

## app-config.js
// We generate this file with Grunt based on system/environment level configuration that is contained elsewhere... YAML file, build number, etc.
(function (exports) {
  exports.config = {
    "appVersion": "dev",
    "cdnUrl": "http://cdn.example.com"
  }
  // this last bit allows the config to be used both in the browser and in Node (Grunt)
}(typeof exports === 'undefined' ? this['WD'] = {}: exports));

## app.js
/**
 * Main application require module.
 */
 define([
    'common/js/modulea',
    'common/js/moduleb',
    ...
   ], function (ModuleA, ModuleB, ...) {
    // APP HERE
    var config = {
      name: 'MyApp',
      VERSION: '0.0.1',
      ready: function () {
        // Remove loading
        $('#app-loading').remove();

      }
    };

    var App = Ember.Application.create(config);

    // We are avoiding using globals, but even though ember has a way
    // internaly to resolve namespaces via an internal lookup
    // (`Ember.Namespace.NAMESPACES_BY_ID`), i don't see any
    // of its code that actually uses it. It all seems to depend on the `Ember.lookup`
    // object, which is really just the global `window` object.
    // At least if we tack our app on to the lookup object rather than
    // directly onto window, we can fool ourselves into feeling better about it :P
    Ember.lookup.App = App;

    // Add models, controllers, views to the application
    // NOTE: These must be tacked onto the Application AFTER it is created,
    // otherwise the Namespaces for the tacked on objects won't resolve
    $.extend(App, Models, CommonModels, Controllers, Components, Views, CommonComponents, CommonViews);


    App.Router.map(function (){
      // Route Map HERE
    });

    // DEFINE ROUTES HERE

    App.ApplicationRoute = Ember.Route.extend(...);

    App.IndexRoute = Ember.Route.extend(...):
   }


## index.html
<!DOCTYPE html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>MyApp</title>
    <style type="text/css">
        html { height: 100%; }
        body { margin: 0px; padding: 0px; height: 100%; background-color: #f1f2f2; }
        #app-loading { background-color: #f1f2f4; height: 100%; text-align: center; }
        #app-loading img { position: relative; top: 50%; margin-top: -24px; }
    </style>
  </head>
  <body id="myapp">
    <div id="app-loading">
        <img src="../common/img/main-spinner.gif" />
    </div>
    <!-- Scripts -->
    <script type="text/javascript">
    (function () {
        "use strict";
        var fn = function () {
                var cdnUrl = WD && WD.config && WD.config.cdnUrl ?
                                [window.location.protocol,'//',WD.config.cdnUrl].join('') : '..',
                    baseUrl = WD && WD.config && WD.config.appVersion && WD.config.appVersion !== 'dev' ?
                        cdnUrl + '/build/' + WD.config.appVersion : cdnUrl;

                if (!WD) WD = {};
                WD.BASE_URL = baseUrl;

                r.src = baseUrl + '/common/lib/require/require.js';
                r.setAttribute('data-main', baseUrl + '/myapp/js/main.js');

                b.appendChild(r);
            },

            b = document.body,
            v = document.createElement('script'),
            r = document.createElement('script');

        v.src = '../common/app-config.js?ts=' + (new Date()).valueOf();

        v.setAttribute('type', 'text/javascript');
        r.setAttribute('type', 'text/javascript');

        v.onload = fn;
        v.onreadystatechange = function () {
            if (v.readyState === 'loaded') {
                fn();
            }
        };

        b.appendChild(v);
    }());
    </script>
  </body>
</html>

## main.js
// Grab global config and augment with the proper base URL
var config = WD.requireConfig;
config['baseUrl'] = WD.BASE_URL + '/myapp/js';

require.config(config);

// First load the common js, then the app
require(['common/common'], function () {
    //TODO: make auth request and get ACL before loading app
    require(['myapp/app'], function (App) {});
});
	// We generate this file with Grunt based on system/environment level configuration that is contained elsewhere... YAML file, build number, etc.
	(function (exports) {
	exports.config = {
	"appVersion": "dev",
	"cdnUrl": "http://cdn.example.com"
	}
	// this last bit allows the config to be used both in the browser and in Node (Grunt)
	}(typeof exports === 'undefined' ? this['WD'] = {}: exports));
	/**
	* Main application require module.
	*/
	define([
	'common/js/modulea',
	'common/js/moduleb',
	...
	], function (ModuleA, ModuleB, ...) {
	// APP HERE
	var config = {
	name: 'MyApp',
	VERSION: '0.0.1',
	ready: function () {
	// Remove loading
	$('#app-loading').remove();

	}
	};

	var App = Ember.Application.create(config);

	// We are avoiding using globals, but even though ember has a way
	// internaly to resolve namespaces via an internal lookup
	// (`Ember.Namespace.NAMESPACES_BY_ID`), i don't see any
	// of its code that actually uses it. It all seems to depend on the `Ember.lookup`
	// object, which is really just the global `window` object.
	// At least if we tack our app on to the lookup object rather than
	// directly onto window, we can fool ourselves into feeling better about it :P
	Ember.lookup.App = App;

	// Add models, controllers, views to the application
	// NOTE: These must be tacked onto the Application AFTER it is created,
	// otherwise the Namespaces for the tacked on objects won't resolve
	$.extend(App, Models, CommonModels, Controllers, Components, Views, CommonComponents, CommonViews);


	App.Router.map(function (){
	// Route Map HERE
	});

	// DEFINE ROUTES HERE

	App.ApplicationRoute = Ember.Route.extend(...);

	App.IndexRoute = Ember.Route.extend(...):
	}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>MyApp</title>
	<style type="text/css">
	html { height: 100%; }
	body { margin: 0px; padding: 0px; height: 100%; background-color: #f1f2f2; }
	#app-loading { background-color: #f1f2f4; height: 100%; text-align: center; }
	#app-loading img { position: relative; top: 50%; margin-top: -24px; }
	</style>
	</head>
	<body id="myapp">
	<div id="app-loading">
	<img src="../common/img/main-spinner.gif" />
	</div>
	<!-- Scripts -->
	<script type="text/javascript">
	(function () {
	"use strict";
	var fn = function () {
	var cdnUrl = WD && WD.config && WD.config.cdnUrl ?
	[window.location.protocol,'//',WD.config.cdnUrl].join('') : '..',
	baseUrl = WD && WD.config && WD.config.appVersion && WD.config.appVersion !== 'dev' ?
	cdnUrl + '/build/' + WD.config.appVersion : cdnUrl;

	if (!WD) WD = {};
	WD.BASE_URL = baseUrl;

	r.src = baseUrl + '/common/lib/require/require.js';
	r.setAttribute('data-main', baseUrl + '/myapp/js/main.js');

	b.appendChild(r);
	},

	b = document.body,
	v = document.createElement('script'),
	r = document.createElement('script');

	v.src = '../common/app-config.js?ts=' + (new Date()).valueOf();

	v.setAttribute('type', 'text/javascript');
	r.setAttribute('type', 'text/javascript');

	v.onload = fn;
	v.onreadystatechange = function () {
	if (v.readyState === 'loaded') {
	fn();
	}
	};

	b.appendChild(v);
	}());
	</script>
	</body>
	</html>
	// Grab global config and augment with the proper base URL
	var config = WD.requireConfig;
	config['baseUrl'] = WD.BASE_URL + '/myapp/js';

	require.config(config);

	// First load the common js, then the app
	require(['common/common'], function () {
	//TODO: make auth request and get ACL before loading app
	require(['myapp/app'], function (App) {});
	});