Cómo acceder a las variables de entorno en Heroku desde AngularJS

Tengo 3 aplicaciones de AngularJS en Heroku. Cada uno de ellos consume diferentes API.

(Por ejemplo: angularjs-dev consume api-dev, angularjs-qa consume api-qa)

He creado un archivo constante como este a continuación

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

Y luego, cuando quiero la URL de la API, la llamo así API_SITE[SITE]

Este problema es cuando quiero desplegar a qa, tengo que cambiar SITE a qa .

Me pregunto: ¿podemos hacer que AngularJS lea las variables de entorno definidas en Heroku para que no tengamos que cambiarlo manualmente de nuevo?

Nota: Sé que AngularJS se está ejecutando en el lado del cliente. Por lo tanto, no tengo idea de cómo hacerlo.

¿Nadie?

En caso de que alguien esté buscando la solución (según mi entorno: AngularJS y NodeJS en Heroku)

Agregué este código a web.js (archivo de inicio de NodeJS)

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

Luego, en el archivo index.html acabo de agregar para recuperar la variable SITE .

Funciona bien.

Esto se puede hacer si está utilizando un paquete web para empaquetar su aplicación cliente, usando el DefinePlugin que le permite crear constantes globales que pueden configurarse en el momento de la comstackción.

Para lograr esto, agregue algo como lo siguiente a su 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),..], ... }; 

Luego puede hacer referencia a sus vars Heroku env en cualquier lugar de su aplicación cliente AngularJS, por ejemplo,

 doSomething(webpack.constants.envVar1); 

Sin embargo, el hecho de que se pueda hacer esto NO significa necesariamente que DEBE hacerse, al menos no en Heroku. La razón por la cual podría no ser una buena idea hacer esto en Heroku es que este esquema no funciona bien con Heroku Pipelines .

Webpack debe ejecutarse como parte de la comstackción de slug de Heroku , por ejemplo, en un script npm postinstall .

Ahora, si tiene un Heroku Pipeline con, digamos, aplicaciones de desarrollo, puesta en escena y producción, y su flujo de trabajo de implementación es ir directamente a la aplicación de desarrollo, y luego promocionar la babosa a su puesta en escena y posteriormente a sus aplicaciones de producción, entonces SEA CONSCIENTE de que la babosa SOLO se construye cuando le das un empujón a tu aplicación de desarrollo. NO se reconstruye posteriormente cuando se asciende por la tubería. Esto significa que el paquete web SOLAMENTE se ejecuta una sola vez, y si emplea el esquema descrito anteriormente para usar env vars en su aplicación AngularJS, el cliente AngularJS de sus aplicaciones de preparación y producción terminará usando los valores de variables env de Heroku que asignó a su aplicación de desarrollo. que NO puede ser lo que pretendías !!

Así es como lo hago. app.locals las variables al objeto app.locals que se puede comstackr en el HTML a través de Jade, donde simplemente las asigno al objeto javascript.

server.js

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

ver.jade

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

Dado que esta pregunta preguntaba cómo acceder a las variables en plural y para mi propio caso de uso, tenía más de una var. Config para su uso en el cliente, quería compartir una forma de enviar vars desde heroku al cliente con una solicitud de obtención. Es similar a la respuesta de @BunSuwanparsert pero en lugar de usar res.send() usé 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(); }); 

 
   

y luego agregar el script en index.html