Separate environment config in Ember

Question

I'm using the ember-cli to build my app, which gives me a nice app.js file that I can server up on a static asset server. What is the most idiomatic way to allow for a separate configuration at deployment time?

For example, I might tell the consumer of my app.js file to include an extra config.[js|json] file which will get loaded, and the values from that file would go into the ENV object... so that I can point the app at a different REST endpoint, for example (QA, Sandbox, Pre-release, etc) without re-compiling.

I figure there must be a way, I'm just not seeing it. I get that there is the config/environment.js file, but that gets compiled into the dist folder. I'm looking for something that sits next to the packaged JS. I can certainly hack something together, so I'm not looking for a hack. An ember-cli-addon, perhaps? I figure there must be an "ember way" to do this.

I'm just not finding it :)

Answer 1

Ok, here is what I did. Basically, I allow some settings to be overridden by the host application. I register an initializer to jam them into the configuration object, and then I use the config options like normal. It looks a little something like this:

config/environment.js

// This is just normal ENV.APP configuration stuff.  Nothing odd here
module.exports = function(environment) {
  var ENV = {
    // snip
    APP: {
      API_HOST: 'http://defaultAPIHost.com',
      AUTH_PROVIDER: 'http://defaultAuthProvider.com'
    }
  };

  return ENV;
};

app/initializers/parameter-overrides.js

import config from '../config/environment';

// This is the custom stuff.  If the values have been defined globally,
// override them on the config object.  I suppose this can be done a
// bit more dynamically, but this explicit code is for illustrative purposes.
export function initialize() {
  let apiOverride = window.MyAppEnv && window.MyAppEnv.API_HOST;
  let authOverride = window.MyAppEnv && window.MyAppEnv.AUTH_PROVIDER;

  config.APP.API_HOST = apiOverride || config.APP.API_HOST;
  config.APP.AUTH_PROVIDER = authOverride || config.APP.AUTH_PROVIDER;
}

export default {
  name: 'parameter-overrides',
  initialize: initialize
};

app/adapters/application

import DS from 'ember-data';
import config from '../config/environment';

// Then consume the config properties as you normally would
export default DS.RESTAdapter.extend({
    host: config.APP.API_HOST,
    namespace: "api"
});

Now, the hosting application can include this in the page, and it will override the values from the config/environment.js:

<script type="text/javascript">
  // Override this value in production to the proper API host and Auth host
  window.MyAppEnv = {
    AUTH_PROVIDER: null, //'http://oauthhost.com/OAuth2'
    API_HOST: null //"http://apihost.com"
  };
</script>

Is this a reasonable approach? Is there something better out there?