maxwell2022 maxwell2022 - 1 year ago 76
AngularJS Question

Setup automation for configuration files with node and angularjs

I started an application in AngularJS couple of weeks ago. All my configuration variable are stored in a constant like this:

* defines constants for application
define(['angular'], function (ng) {
'use strict';
return ng.module('app.constants', [])
.constant('CONFIG', {
node_port: 3700,
api_host: 'api.acme.local',
node_host: '',
facebook_app_id: 'xxxxxxxxx'

The problem I have is that I need to change this value each time I want to push my application in stage. I'm using
so I could ignore this file and modify it once on the stage server. It might not be the best solution but it would work.

Now recently I've added a
server to my application using
, which mean I now have to setup the client in my angularjs application and the
Because I'm using
I also need to update the path for


paths: {
'jquery': 'bower_components/jquery/dist/jquery.min',
'socketio': 'http://acme.local:3700/'

and my

var express = require('express'),
debug = true,
http = require('http'),
_ = require('underscore'),
server = express(),
port = 3700,
api_host = 'api.acme.local',
io = require('').listen(server.listen(port), {log: debug});


var options = {
hostname: api_host,
port: 80,
path: '/courses',
method: 'GET'

var req = http.request(options, function(res) {
var output = '';

res.on('data', function (chunk) {
output += chunk;

So basically I'm ending up with duplicated variable for my node application and angular application, plus I need to toggle values between
variables values.

What would be the best solution to this problem?



Just found out that requirejs has a failover option for the path, so for now I'm using it:

paths: {
'jquery': 'bower_components/jquery/dist/jquery.min',
'socketio': [

Still investigating how to do it properly

Answer Source

I'm in the same configuration as you.

Basically, here is my architecture :

  • a "front" folder for angular
  • a "back" folder for anodejs
  • a "common" folder for shared files between angular and node

  • one specific configuration file by environment in the common folder (sharzed by angular and node)

  • one specific configuration file by i18n locale in the common folder (sharzed by angular and node)
  • a "constant-type" angular module filled in at runtime/buildtime by Grunt

and Grunt with a few modules installed. Then :

  • When running nodejs server on a specific environment, only the environment config file is loaded.
  • When packaging angularjs, this same file is used to create the constant-type" angular module which keys comes from the static JSON config file.
  • same thing for i18n contant module

That way both sides, angular and nodejs shares the same configuration and have synchronized configurations.

For an example of this behavior, see my detailed and Grunt-powered answer here : How to set AngularjJS base URL dynamically based on fetched environment variable? :

I personnaly do this kind of stuff with grunt.

When I run my angular-app I have multiple tasks :

> grunt run --target=dev
> grunt run --target=prod
> grunt build --target=dev
> grunt build --target=prod
> etc...

Then grunt do strings replacement with the help of the grunt-preprocess module :

my constants.tpl.js file gets parsed :

baseUrl:           '/* @echo ENV_WS_URL */',

and the url is populated.

There are endless possibilities (string replacements, file copy, etc).

Doing it with grunt ensure that dev config files do not go in production for example..

I can put more details if you're interested but I only wanted to show you a different approach.

edit gruntFile example :

'use strict';

module.exports = function(grunt) {

     * Retrieving current target
    var target = grunt.option('target') || 'dev';
    var availableTargets = [

     * Load environment-specific variables
    var envConfig = grunt.file.readJSON('conf.' + target + '.json');

     * This is the configuration object Grunt uses to give each plugin its
     * instructions.
        env: envConfig,       

        /* Build files to a specific env or mode */
        preprocess: {
            options: {
                context: {
                    ENV_WS_URL: '<%= env.wsUrl %>'
            constants: {
                src: 'constants.tpl.js',
                dest: 'constants.js'

        karma: {
            unit: {
                configFile: '<%= src.karma %>',
                autoWatch: false,
                singleRun: true
            watch: {
                configFile: '<%= src.karma %>',
                autoWatch: true,
                singleRun: false


    /* Plugins load */

    /* Available tasks */
    grunt.registerTask('run', 'Run task, launch web server for dev part', ['preprocess:constants']);


Now, the command :

> grunt run --target=dev

will create a new file "constants.js" with a environment-specific url which will be used by Angular

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download