Background

Spring Boot back-end with AngularJS front-end.

Scenario

Our product has two versions: lite version and standard version. Some features are only available in standard version. So some UI components need to be hidden in lite version. This is controlled by build process. By passing different flags to the build process, different versions can be built. Front-end code uses the same flag to show/hide different components.

Solution

Install grunt-ng-constant and load task grunt-ng-constant in Grunt config.

npm install grunt-ng-constant --save-dev  

Then add ngconstant config in Gruntfile. In the config below, I defined two environments, development and production. All environment-related configurations are put into ENV object. distType is the type I want to specify different release versions. In development build, this value is set to standard. In production build, this value is set to grunt.option('distType'), so it's controlled by command line arguments when Grunt is invoked.

ngconstant: {  
  options: {
    space: '  ',
    wrap: 'define(["angular"], function(angular){ \n return {{ "{%= __ngModule " }}%} \n\n });',
    name: 'config'
  },
  development: {
    options: {
      dest: '<%= appConfig.build %>/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'development',
        apiEndpoint: 'http://localhost:8080/',
        distType: 'standard'
      }
    }
  },
  production: {
    options: {
      dest: '<%= appConfig.build %>/scripts/config.js'
    },
    constants: {
      ENV: {
        name: 'production',
        apiEndpoint: '/',
        distType: grunt.option('distType')
      }
    }
  }
}

Add ngconstant:production to the list of production build tasks. To build a lite version, use grunt build --distType=lite. To build a standard version, use grunt build --distType=standard.

grunt-ng-constant generates the config.js file in specified directory. Include this file using <script> or load it using RequireJS.

define(['angular', 'config'], (angular, config) ->  
  angular.module('myApp', (ENV) ->
    // Use ENV to check version
  )
)