How to make corner app 12 compatible with your configuration

Question

I am trying to make the angularjs app 12 application compatible with the configuration ( http://12factor.net/config ).

It must depend on the environment, and I do not see in the code word development, test, productionetc.

Variables can be stored, for example, in bash env. I could transfer them to the web server.

I already thought about the .erb template file for erb config.js.erb > config.js, but if I change the variable while the application is running, I will have to redo this.

I already found this article http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/

But it is a big lie and Grunt.js to do it, really ... Anyway.

I know that the 12factor philosophy was not created for the frontend application, but my angular application can be deployed on different servers in many environments, and it will not hurt anyone to try to do something right :).

Thank!

Edit:

The configuration options that I would like to use will be as follows:

app:
   api:
       url: "The url of the api server"
       port: 8080
   cdn:
       images: "url of my images caching service"
   google:
       oauth:
           "api_key": "The api key used for that deployment"
   #other external frontend services

Other Edit:

This guy seems to have gone with the answer: http://bahmutov.calepin.co/inject-valid-constants-into-angular.html , which I find disgusting and completely attached to the corners; but it works!

Answer 1

, , , Heroku, . conf .

, , , Append .

Append . - - "", !

var compression = require('compression');
var express = require('express');
var logfmt = require('logfmt');
var stdio = require('stdio');
var glob = require("glob");
var fs = require('fs');

// ------------------------
// Read config from args
var ops = stdio.getopt({
  'url': {
    key: 'u',
    args: 1,
    default: '',
    description: 'Url of api server'
  },
  'port': {
    key: 'p',
    args: 1,
    default: 5000,
    description: 'Port on which to listen'
  }
});


var port = ops.port || process.env.PORT;
ops.port = undefined;

// ------------------------
// Append config to js built file

var codeToAppend = 'angular.module("project.config",[]).constant("ApiConfig",' + JSON.stringify(ops) + ');';

glob(__dirname + '/dist/scripts/scripts.*.js', function(er, files) {
  fs.appendFile(files[0], codeToAppend, function(err) {
    if (err) {
      throw err;
    }
    console.log('The "conf code" was appended to file!');
  });
});

// ------------------------
// Start App :3

var app = express();

app.use(logfmt.requestLogger());
app.use(compression({
  threshold: 512
}));
app.use(express.static(__dirname + '/dist'));

app.get('/config', function(req, res) {
  res.json(ops);
});

app.listen(port);

Answer 2

github, , , Angular-Express-Train-Seed