• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Aurelia Configuration

Aurelia 1, Javascript · September 3, 2015

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.

Dwayne

Leave a Reply Cancel reply

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Douglas
Douglas
7 years ago

How do you recommend handling cases where you have a local, test and production environment settings?

0
Dwayne
Dwayne
Author
7 years ago

@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.

0
Amit
Amit
6 years ago

The github configuration plugin is not accessible anymore ?

0
Steven Boyd
Steven Boyd
5 years ago

Just wanted to say a big thank you!!
This is just what I needed for my Aurelia app!

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • Thoughts on the Flipper Zero
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Paginate An Array In Javascript
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Reliably waiting for network responses in Playwright
  • How To Mock uuid In Jest
  • Wild Natural Deodorant Review

Recent Comments

  • Dwayne on Is Asking Developers How to Write FizzBuzz Outdated?
  • kevmeister68 on Is Asking Developers How to Write FizzBuzz Outdated?
  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz