ember-cli including different script tags in development vs production

Question

when using ember-cli I would like to be able to include an external js library which requires an API key and I would like to use a different API key in development vs production.

Essentially I would like to add the following script tag to app/index.html

<script type="text/javascript" src="http://something.com?key=API_KEY"></script>

but I would like API_KEY to be different when I'm running in development as opposed to production.

Thanks for the help!

Can you configure that using environment specific assets? ember-cli.com/managing-dependencies/… — CraigTeegarden
it isn't clear to me how I would do that, but I'll investigate further. — Francois

Mike Grassotti Mike Grassotti · Accepted Answer · 2014-11-06T02:11:24

Have a look at the ember-inject-script addon which makes it easy to include 3rd party scripts in your ember-cli app. To use it, npm-install the addon then use an initializer to load the script. Then set different values for API_KEY in your config/environment.js

npm install --save-dev ember-inject-script
ember generate initializer something-dot-com

Then edit the initializer as follows

import injectScript from 'ember-inject-script';
import config from '../config/environment';

export default {
  name: 'something-dot-com',
  initialize: function() {
    var url = "//something.com?key=" + config.SOMETHING_API_KEY;
    injectScript(url);
  };
}

And in config/environment.js

ENV.SOMETHING_API_KEY = 'YOUR_DEV_API_KEY';

if (ENV.environment === "production") {
  ENV.SOMETHING_API_KEY = 'YOUR_PROD_API_KEY';
}

ember-cli including different script tags in development vs production

1 Answers