Separate environment configuration in Ember
I am using ember-cli
to build my application which gives me a nice file app.js
that I can run on a static server. What's the most idiomatic way to provide separate configuration during deployment?
For example, I can tell the consumer of my file app.js
to include an additional file config.[js|json]
to be loaded, and the values from that file will be sent to the object ENV
... so that I can point the application to a different REST endpoint like (QA, Sandbox, Pre-release and etc.) without recompiling.
I suppose there must be a way, I just don't see it. I get that there is a file config/environment.js
, but it's compiled into a folder dist
. I'm looking for something that sits alongside the packaged JS. I can of course hack something together, so I am not looking for a hack. Maybe ember-cli-addon
? I believe there must be an "explicit path" for this.
I just don't find it :)
source to share
Ok, here's what I did. Basically, I allow some settings to be overridden by the host application. I register an initializer to hush them in the config object and then I use the config options as usual. It looks 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;
};
<strong> 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 / apps
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 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 sane approach? Is there something better?
source to share