How to pass API keys in environment variables to Ember CLI using process.env?

Question

How do I pass environment variables from bashrc to Ember CLI. I imagine a situation where you need stripe api keys or pusher api-keys and you have them in your environment variables in bashrc. How do you pass the api-keys to Ember CLI.

I tried using Node.js process.env in both the brocfile.js and environment.js, but when I try to access it in the Ember JS controller, the property is null.

In my environment.js file I added,

APP: { apiKey: process.env.KEY }

In My Ember JS controller I tried accessing it with:

import config from  '../config/environment'; 

And setting the controller property lkey as shown below, which didn't work:

lkey: config.App.KEY

Next in my brocfile.js, I added:

var limaKey = process.env.Key; 
var app = new EmberApp({key: limaKey});

This still didn't work.

Solution 1

I finally resolved this issue. I was faced with two options. Option 1 was to use XHR to fetch the api-keys from an end-point on the server. Option 2 is get the api-key directly from environment variables using Nodejs process.env. I prefer option 2 because it saves me from doing XHR request.

You can get option 2 by using this ember-cli-addOn which depends on Nodejs Dotenv project

• https://github.com/fivetanley/ember-cli-dotenv
• https://github.com/motdotla/dotenv

In my case I choose to do it without any addOn.

1. First add the api-key to your .bashrc if you are Ubuntu or the approapriate place for your own linux distro.

export API_KEY=NwPyhL5

2. Reload the .bashrc file, so your setting are picked up:

source ~/.bashrc

3. In Ember CLI add a property to the ENV object in config/environment.js. The default looks like this

module.exports = function(environment) {
  var ENV = {
     modulePrefix: 'rails-em-cli',
     environment: environment,
     baseURL: '/',
     locationType: 'auto',
     EmberENV: {

      }
   }

Now to that ENV object, we can add a new property myApiKey like this:

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'rails-em-cli',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    myApikey: null,
    EmberENV: {

     }

   //assign a value to the myApiKey

     if (environment === 'development') {
        // ENV.APP.LOG_RESOLVER = true;

        ENV.myApiKey = process.env.API_KEY;
      }              

   }

Note that process.env.API_KEY is fetching the setting we added to .bashrc and assigning it to myApiKey. You will need to have Nodejs installed on your server for process.env to work.

Finally to access that variable in your controller you do

import config from '../config/environment';
import Ember from 'ember';

export default Ember.Controller.extend({

  yourKey: config.myApikey,

});

That's it.

Solution 2

You can also set the variables on the ENV.APP object: they will be carried by the application instance.

You can then reuse them inside initializer & so on.

This way, you won't have to import config/environment into application's code, which seems a little weird to me.

Solution 3

I want to make sure that my API keys are not checked in. As part of the build process, I copy a local config file to the config directory and load it into environment.js

In environment.js

try {
  var local = require('./local_environment');
  Object.keys(local.config).forEach(function(key) {
    ENV[key] = local.config[key];
  });
} catch(err) {
  console.log("config/local_environment.js not found");
}

In local_environment.js (not checked in, copied by build process)

exports.config = {
  SOME_API_KEY: 'key_here'
};

Solution 4

The key is to define the ENV variables in config/environment.js and when you need to access them somewhere (i.e. adapter, controller, etc), you import config/environment.js first.

For an Ember CLI app, https://ember-cli.com/user-guide/#Environments documents this, for your reference.

Sample logic:

# app/controllers/foobar.js
import DS from 'ember-data';
import ENV from 'nameOfApp/config/environment';

export default Ember.Controller.extend({
  actions: {
    click: function() {
      console.log(ENV.SOME_ENVIRONMENT_KEY);
    }
  }
});

# config/environment.js
module.exports = function(environment) {
  ....

  if (environment === 'development') {
    ENV.SOME_ENVIRONMENT_KEY = 'asdf1234';
  }

  ...
};

View more solutions

Comments

[jakecraige]

ember rails isn't ember-cli btw

[brg]

I know that and you could see their names are different, so I know they are different. My example shows how do to it when using ember-rails and I am asking how do it with ember-cli. see the last line of my question.

[jakecraige]

Something like that would likely need to be tied into the build process of ember-cli or in the environment.js file. A quick and dirty way would be to just use node in the environment.js file to read wherever you have the keys stored in the rails app and add them into the app's environment configuration.

[jakecraige]

That would be assuming you're using something like secrets.yml or application.yml to store them so you could just read them off

[brg]

Yes I am using secrets.yml. I am now experimenting with using node in the environment.js file using process.env.xxx to env variables in the bashrc file. cheers

[talltolerablehuman]

could you also add an example of how to access it using the app instance? did you mean to use this.container.lookup('application:main')?

[Mike Aski]

yep, that's indeed what I meant.

[Stéphane Bruckert]

No need for any of these ember addons on my side. process.env.API_KEY was enough!

[Epirocks]

I emphasize more with the original question of specifying the option in the commandline at ember build like --environment=staging --key=<key>