[SOLVED] EmberJS, How to manage different "config variables" for different "environments"

EmberJS, How to manage different "config variables" for different "environments"

There are several of questions under the emberjs tag that talk about how to manage different environments but all of them are only applying for very concrete scenarios.

I'm looking for a general solution of how to set different config variables for different environments.

Let's say of example I have one API URL for my develoment environment and another API URL for my production environment.

production_api_url: "http://production.server.com/api"
development_api_url: "http://development.server.com/api"

And in my adapter I would like to use the appropriate API URL:

# /app/adapters/application.js
import ActiveModelAdapter from 'active-model-adapter';

export default ActiveModelAdapter.extend({
  namespace: 'api',
  host: [[API_URL]]
});

Solution

In Ember 2.2 and EmberCLI it can work out-of-the-box like this:

Setting up the URLS for each environment:

# /config/environments.js
...
if (production === 'production') {
  ENV.API_HOST = 'http://production.server.com'
}

if (environment === 'development') {
  ENV.API_HOST = 'http://development.server.com'
}
...

Using the URL in the adapter:

# /app/adapters/application.js
import ActiveModelAdapter from 'active-model-adapter';
import config from '../config/environment';

export default ActiveModelAdapter.extend({
  namespace: 'api',
  host: config.API_HOST
});