One of the most important aspects of a web application (besides the application itself) is how configurable it is. Where you define key global pieces of data accessible to whatever part of the application needs them; name, version number, API endpoints, API keys and more.

This is why I created Aurelia Configuration. A simple plugin for the Aurelia Javascript framework that allows you to have a configuration file for your application and then pull out values (with support for temporarily overriding values).

Features

• Easy to install
• Highly Configurable
• Dynamic environment switching (map hostname values to environments) to work with build deployments
• Great API for setting and getting configuration values

Using Aurelia Configuration

Rather than repeating what has already been said, head over to the repository (link above) and install the plugin into your applications bootstrap process.

After you have installed the plugin, you then want to create a configuration file. By default the plugin will assume you have a configuration file called application.json in a folder called config located in your root directory. These values are of course, configurable.

Lets populate our application.json file with some example values for testing:

{
    "name": "My Application",
    "version": 1.2,
    "api": {
        "key": "12380198230918jlfkjsdfs",
        "endpoint": "http://myapi.com/v2/"
    }
}

Now to use the plugin within a ViewModel, you merely have to import then inject it like you would any other Aurelia dependency then use the few API methods.

import {Configure} from 'aurelia-configuration';
import {inject} from 'aurelia-framework';

@inject(Configure)
export class ViewModel {
    constructor(config) {
        this.config = config;
    }

    sampleMethod() {
        let applicationName = this.config.get('name');
        let apiKey = this.config.get('api.key');
        let apiEndpoint = this.config.get('api.endpoint');

        // Get all config values
        let theConfig = this.config.getAll();
    }

    anotherMethod() {
        // Values only persisted temporarily and not written to file
        this.config.set('name', 'Changed Application Name');
        this.config.set('api.key', 'kjlkcjfsd9f8d8fsdklfjlsk2');
        this.config.set('api.endpoint', 'http://anotherdomain.com/api/v4');

        // Override the config object completely (not recommended)
        this.config.setAll({
                "newProp": "sdaksjdlkasjdas"
        });
    }
}

Configuration

No plugin would be complete without being configurable, right? Every aspect of the plugin can be configured during the bootstrapping phase. Examples on dynamic environment configuration and manual environment configuration are documented in the repository README itself here.

Rather than repeat what has already been said, the README is rather concise and has code examples to easily follow.

Conclusion

There isn’t a whole lot to this plugin. Its goal is to help you configure your Aurelia applications using a config file instead of changing values in a Javascript class. If your app is user-focused and configurable, it means splitting out your configuration from your application logic and that could save you many headaches.

As always, if you spot any bugs or have improves; please fork and submit a PR.