How to access environment variables on Heroku from AngularJS

Question

I have 3 AngularJS applications on Heroku. Each of them uses different APIs.

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

I created a persistent file as shown 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 that API_SITE[SITE]

This problem occurs when I want to deploy to qa, I need to change SITE to qa .

The interesting thing is: can we make AngularJS reading environment variables defined on Heroku, so we don’t have to manually change it manually.

Note: I know that AngularJS works on the client side. So, I have no idea how to do this.

Is anyone

Answer 1

If someone is looking for a solution (based on my environment: AngularJS and NodeJS on Heroku)

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

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

Then in the index.html file I just added <script src="/site.js"></script> to retrieve the SITE variable.

It works well.

Answer 2

This can be done if you use webpack to connect your client application using DefinePlugin, which allows you to create global constants that you can configure 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 env vars Heroku anywhere in your AngularJS client application, for example.

 doSomething(webpack.constants.envVar1); 

However, the fact that this MAY be done does not necessarily mean that it MUST be done, at least not on Geroku. The reason it might be a great idea to do it on Heroku is because this circuit doesn't work very well with Heroku Pipelines .

Webpack needs to be run as part of the Heroku slug compilation , for example. in npm postinstall script .

Now, if you have a Heroku pipeline with, say, developers, middleware and production applications, and the deployment workflow is git, click on the development application and then push the pool to your production and then to your production applications, then BE MEAN that slug is ONLY created when you git click on your development application. Subsequently, it does not recover when it moves through the pipeline. This means that webpack ONLY starts once, and if you use the scheme described above to use env vars in your AngularJS application, the AngularJS client of your middleware and production applications will end using the env var Heroku values ​​that you assigned to your development application, which may not be what you wanted.

Answer 3

This is how I do it. I bind variables to the app.locals object, which can be compiled into HTML via Jade, where I simply assign them to a javascript object.

server.js

 app.locals.env = process.env["dev"]; app.get('/', function(req, res){ res.locals.particular = "to this request"; res.render('view.jade'); }); 

view.jade

 if(env) script var env = !{JSON.stringify(env)} 

Answer 4

Since this question asked a question about how to access plural variables, and for my own use case I had several var configurations for use in the client, I would like to share a way to send vars from heroku to the client with a single receive request. This is similar to @BunSuwanparsert's 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> 
 

and then add a script to index.html