How to use environment variables on the client side

[louisscruz]

I have some API keys that are currently stored in controllers and factories. For instance:

angular.module('exampleApp')
  .factory('flickr', ['$http',
    function($http) {
      var apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
      ....
    }
]);

Is there a way I can store an API key like this in my local.env.js? Can someone please give me a specific way of doing so?

For deployment, I'd like to set these variables on my server with:

export FLICKR_API_KEY='xxxxxxxxxxxxxxxxxxxxxxxxx'

Please forgive my ignorance on this. I come from a rails background, so setting server side variables isn't an issue for me. The problem is client side variables. I've read every issue related to environment variables, local.env, etc., but I'm struggling to get a good understanding of this. If someone informs me how this works, I'll be happy to add some info to the docs.

[kingcody]

So you are wanting to expose a server side environment variable to your client code? How dynamic is the variable? Will it stay the same after the project has been compiled or will it differ depending on the deployment?

[louisscruz]

@kingcody Yes, I want to expose a server side environment variable to my client code. The variable is not dynamic, and it will remain the same after compilation (no difference for different compilations). I know that this variable will inevitably be known to the client, but I'd prefer not to check it into version control. Would something like grunt-replace be my best bet?

[Awk34]

If you want to store it client-side without being in Git, you could commit a js file that exposes nothing, and is loaded in index.html. Then, once that file is in Git, add it to your .gitignore, and then add whatever keys you'd like to it, that way any new changes won't be committed. Or just use grunt-replace.

[remicastaing]

@louisscruz , you could also inject your API key at build time. Take a look at this old PR: #757.

[louisscruz]

Thank you all for your guidance!