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 :)

So that the data models can point to a different backend without rebuilding. — Brian Genisio, May 19 '15 at 01:38
ember-cli way, since it really has nothing to do with ember, but more to do with how it's built :) — Kingpin2k, May 19 '15 at 01:39
Is this helpful? http://stackoverflow.com/questions/30111291/how-to-link-to-a-specific-rails-api-route-with-server-generated-content-in-ember/30112686#30112686 — aceofspades, May 19 '15 at 01:47
You could just use a global to initiate properties in your environment config, and insert that global from your index.html page (or overwrite it there) so as to avoid it being part of the build. Personally I like just doing different build definitions and having it all in the environment.js file, but honestly, that's just a preference. — Kingpin2k, May 19 '15 at 01:50
The stock environment build doesn't work for me because the app will be deployed on many servers, all with different API backend locations. I think I've come up with something that works well. I'll post it shortly. — Brian Genisio, May 20 '15 at 01:11

score 3 · Answer 1 · answered May 20 '15 at 02:01

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?

Separate environment config in Ember

1 Answers1