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.
How do you recommend handling cases where you have a local, test and production environment settings?
@Douglas,
Funny you mention that. Someone else had the same question as you here: https://github.com/Vheissu/Aurelia-Configuration/issues/2 – so I put out a new release this morning 1.0.3 (https://github.com/Vheissu/Aurelia-Configuration/releases/tag/1.0.3) which adds in the ability to define environments and dynamically have them change (depending on the hostname in the URL).
Keen to hear your thoughts around this and whether or not it helps you.
The github configuration plugin is not accessible anymore ?
Just wanted to say a big thank you!!
This is just what I needed for my Aurelia app!