How to access environment variables on Heroku from AngularJS

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.

Since this question asked how to access variables plural and for my own use case I had more than one config var for use in the client I wanted to share a way to send vars from heroku to the client with one get request. It's similar to @BunSuwanparsert answer but instead of using res.send() I used res.write()

//server.js

app.get('/config.js', function(req, res){

   res.write("var SOME_URL='"+process.env.SOME_URL+"'" + '\n');
   res.write("var API_KEY='"+process.env.API_KEY+"'" + '\n');
   res.write("var AUTH_DOM='"+process.env.AUTH_DOM+"'" + '\n');
   res.write("var STRG_BUCKET='"+process.env.STRG_BUCKET+"'" + '\n');
   res.write("var MSG_SND_ID='"+process.env.MSG_SND_ID+"'" + '\n');
   res.end();

});

 
  <script src="/config.js"></script>

This can be done if you are using webpack for bundling your client app, by using the DefinePlugin that allows you to create global constants which can be configured at compile time.

To achieve this, add something like the following to your webpack.config.js:

var constants = {
     'webpack.constants.envVar1' : process.env.HEROKU_ENV_VAR_1,
     'webpack.constants.envVar2' : process.env.HEROKU_ENV_VAR_2,
     ...
};

module.exports = {
    ...
    plugins: [new webpack.DefinePlugin(constants),..],
    ...
};

You can then reference your Heroku env vars anywhere in your AngularJS client app, e.g.

doSomething(webpack.constants.envVar1);

However, the fact that this CAN be done does not necessarily mean that this SHOULD be done, at least not on Heroku. The reason it might not be a great idea to do this on Heroku is that this scheme doesn't play nicely with Heroku Pipelines.

Webpack needs to run as part of the Heroku slug compilation, e.g. in an npm postinstall script.

Now, if you have a Heroku Pipeline with, say, development, staging and production apps, and your deployment workflow is to git push to the development app, and then to promote the slug to your staging and subsequently to your production apps, then BE AWARE that the slug ONLY gets built when you git push to your development app. It is NOT subsequently rebuilt when promoted up the pipeline. This means that webpack ONLY runs once, and if you employ the scheme described above for using env vars in your AngularJS app, the AngularJS client of your staging and production apps will end up using the Heroku env var values you assigned to your development app, which might NOT be what you intended!!