Env variables inside Ember's index.html

Using environment variables in ember is straightforward: export your env vars using any tool like direnv and import them inside your config/environment.js using node’s process.ENV.YOUR_ENV_KEY.

  ENV.APP.MIXPANEL_TOKEN = process.env.MIXPANEL_TOKEN;
  ENV.APP.GA_TOKEN = process.env.GA_TOKEN;

Then in any part of your Ember app you can import the config env and use them.

import Config from 'my-ember-project/config/environment';

However this won’t work if you want to use an environment variable from index.html. This is the first file that the browser loads which then tells the browser to fetch the ember and your ember code, among others.

Ember in-repo addons to the rescue

Ember in-repo addons come to the rescue because they allow you to manipulate the index.html using ember-cli’s contentFor hook. As you might have guessed, this hook is called whenever you add a content-for in your index.html, like {{content-for "head"}}.

You can even create your own content-for hook like {{content-for "variables"}}. Then in your project run ember g in-repo-addon variables which will create a basic addon structure under your lib/ folder. This will allow you to export the environment variables straight to the window object:

/*jshint node:true, esversion: 6*/
module.exports = {
  name: 'metrics',

  isDevelopingAddon: function() {
    return true;
  },
  contentFor: function(type, config){
    if (type === 'variables'){
      return `
        window.MIXPANEL_TOKEN = "${config.APP.MIXPANEL_TOKEN}";
        window.GA_TOKEN = "${config.APP.GA_TOKEN}";
      `;
    }
  }
};

Now {{content-for "variables"}} will basically run the code returned by the hook method, giving you access to your environment variables, on build time.

I should note that those hooks are also available on regular (out-of-repo) addons.