Different settings for debug/local (“grunt serve”) vs. dist/build (“grunt”)?

Question

I want to define some application settings , but I want to provide different values depending on whether I'm running in 'debug' mode (eg grunt serve ), or whether the final compiled app is running (eg the output of grunt ). That is, something like:

angular.module('myApp').factory('AppSettings', function() {
  if (DebugMode()) { // ?? 
    return { apiPort: 12345 };
  } else {
    return { apiPort: 8008 };
  } 
});

How can I accomplish this?

Answer 1

The way I handle it in my apps:

1. move all your config data for one environment to a file: config.js, config.json,... whatever your app finds easy to read.
2. now modify your config file to turn it into a template using grunt config values, and generate the file with grunt-template as part of your build - for example: app.constant('myAppConfig', {bananaHammocks: <%= banana.hammocks %>});
3. finally, add grunt-stage to switch grunt config values depending on environment: create your different config/secret/(env).json files, update your template ( app.constant('myAppConfig', {bananaHammocks: <%= stg.banana.hammocks %>}); ), and then grunt stage:local:build or grunt stage:prod:build

I find this the good balance between complexity and features (separation between environments, runtime code not concerned with building options,...)