How to access environment variables on Heroku from AngularJS

Question

I have 3 of AngularJS apps on Heroku. Each of them consumes different API.

(For example: angularjs-dev consume api-dev, angularjs-qa consumes api-qa)

I created constant file like this below

SITE     = 'dev'
API_SITE = {
      dev       : 'dev-url',
      qa        : 'qa-url',
      production: 'production-url'
}

And then when I want the API url, I call it this way API_SITE[SITE]

This problem is when I want to deploy to qa, I have to change SITE to qa.

I wonder that: can we make AngularJS read environment variables defined on Heroku so we won't have to change it manually again

Note: I know that AngularJS is running on client-side. So, I have no idea how to do it.

Anyone?

Answer 1

In case that someone is looking for the solution (based on my environment: AngularJS and NodeJS on Heroku)

I added this code to web.js (NodeJS starter file)

var options = {};
var jade = require('jade');

app.get('/site.js', function(req, res){
    res.send("var SITE='"+process.env.SITE+"'");
});

Then, in file index.html I just added <script src="/site.js"></script> for retriving SITE variable.

It works well.