Environment dependent configuration in Sencha ExtJS

As it seems there is no out-of-the-box way in Sencha ExtJS to provide a configuration based on the build environment (development, testing or production) to your application. Since you need at least different urls for your proxys, it makes sense to have a mechanism in place that would generate the respective configuration for you. This is our solution for the problem.

We usually add a configuration class like this to our Sencha ExtJS applications:

Ext.define('MyProject.config.Config', {
    singleton: true,
    envConfigs: {
        development: {
            baseUrl: 'https://api.loc'
        },
        testing: {
            baseUrl: 'https://api.testing.loc'
        },
        production: {
            baseUrl:  'https://api.production.loc'
        }
    },
    active: {},
    constructor: function () {
        var me = this,
            env = Ext.manifest['env'],
            envConfig;

        if (!env) {
            throw new Error('No env set in manifest');
        }

        envConfig = me.envConfigs[env];
        if (!envConfig) {
            throw new Error('No configuration found for environment '
                + env);
        }

        me.active = envConfig;
    },
    /**
     * Returns a value of the currently active config.
     * You may use dotted identifier to access any nested values
     * such as "notification.uri"
     *
     * @param identifier
     * @param defaultValue
     * @returns {*}
     */
    get: function (identifier, defaultValue) {
        var me = this,
            value = me.active,
            currPath = [],
            chain;

        if (!identifier) {
            return value;
        }

        chain = identifier.split('.');

        for (var index in chain) {
            var path;
            if (!chain.hasOwnProperty(index)) {
                continue;
            }

            path = chain[index];
            currPath.push(path);

            if (typeof value[path] === 'undefined') {
                if (typeof defaultValue === 'undefined') {
                    throw new Error(
                        'Path ' + identifier + ' could not be' + 
                        ' resolved from payload. Failed at "' + 
                        currPath.join('.') + '"'
                    );
                }

                return defaultValue;
            } else {
                value = value[path];
            }
        }

        return value;
    }
});

Within the envConfigs object we define the configurations for the three different environments Sencha ExtJS knows about: development, testing and production. When creating an instance of the class we simply copy the current configuration based on the setting of Ext.manifest['env'] into a sperate object which is later used as a datasource for the queries.

To populate Ext.manifest['env'] with the current build enviroment add the following lines to your app.json file:

/**
 * Build enviroment
 */
"env": "${build.environment}",

Now in the code you can query config elements by calling:

MyProject.config.Config.get('baseUrl');

Or if you want to return a default value in case the configuration setting is not found, simply pass it as a second paramater to the method:

MyProject.config.Config.get('duration', 3600);