• Stars
    star
    102
  • Rank 334,520 (Top 7 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Smart configuration for your Aurelia applications.

Aurelia-Configuration (for Aurelia 1)

Join the chat at https://gitter.im/Vheissu/Aurelia-Configuration

NPM

A smart configuration plugin and singleton service layer for your Aurelia applications.

Get Started

  • Install aurelia-configuration

Jspm users

jspm install aurelia-configuration

Webpack/CLI

npm install aurelia-configuration --save

Using Aurelia CLI?

You will need to add in some directives to your aurelia.json file located in the aurelia_project folder.

You need to add 'aurelia-configuration' at the end of the dependencies section add the following so RequireJS is able to map the dependencies appropriately.

{
    "name": 'aurelia-configuration',
    "path": "../node_modules/aurelia-configuration/dist/amd",
    "main": "index"
}
  • Add plugin to your app's main.js or main.ts file:
export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-configuration');

    aurelia.start().then(a => a.setRoot());
}

Using Webpack?

You will need to use the PLATFORM.moduleName method to help the Webpack plugin find the plugin.

import { PLATFORM } from 'aurelia-pal';

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin(PLATFORM.moduleName('aurelia-configuration'));

    aurelia.start().then(a => a.setRoot());
}
```

-   Use the plugin to **set** configuration in your app's main.js or main.ts file:

```javascript
import { Configuration } from 'aurelia-configuration';
// [...]
aurelia.use
        .standardConfiguration()
        .plugin('aurelia-i18n', (instance) => {
                let configInstance = aurelia.container.get(Configuration);
                let apiEndpoint = configInstance.get('api.endpoint');
  • Create a config file. By default the plugin will assume a configuration file called: config.json inside of a root directory called "config" - the contents of the JSON file can be anything you like as long as it is a JSON object. You can configure the plugin to use a different config file if you like.
{
    "name": "Test Application",
    "version": "1.2",
    "api": {
        "key": "somekey",
        "endpoint": "http://www.google.com/"
    }
}

Using with your ViewModel:

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

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

        // Get configuration data using this.config
        // Single non-namespace item:
        this.config.get('name'); // Using above sample config would return 'Test Application'
        // Single namespaced item:
        this.config.get('api.key'); // Using above sample config would return 'somekey'

        // Get config item and if it doesn't exist return a default value provided as the second argument
        this.config.get('name', 'default value');

        // Setting a temporary config value non-namespaced:
        this.config.set('newkey', 'surprise!'); // Would store a value of 'surprise!' on object {newkey: 'surprise!'}
        // Setting a temporary config value namespaced:
        this.config.set('websites.name', 'Google'); // Would store a value of 'Google' on object {websites: {name: 'Google'}}
    }
}

Configuration

The Aurelia Configuration plugin allows you to configure during the bootstrapping phase.

Changing environment

The concept of environment configuration exists within this plugin. By default the plugin assumes no environment is specified, however you can have different levels of environment config values which you can configure the plugin to look in first.

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-configuration', config => {
            config.setEnvironment('development'); // Environment changes to development
        });

    aurelia.start().then(a => a.setRoot());
}

If a value is not found inside of a configuration group, it will attempt to look for it further up the configuration file. Situations where this might be useful is different API details for different environments.

{
    "name": "Test Application",
    "api": {
        "key": "somekey",
        "endpoint": "http://www.google.com/"
    },
    "development": {
        "api": {
            "key": "developmentonlykey938109283091",
            "endpoint": "http://localhost/api/v1"
        }
    }
}

If you have specified a particular environment and a config value does not exist, it will look for it further up the config file. For example if you have your environment set to "development" and you request an API key but it isn't specified and you have a value specified futher up, it will use that.

The idea is environment specific config values extend parent values, similar to what Ruby on Rails does with its configuration. By default this behaviour is turned on, but if you don't want values to be searched outside of your specified environment, disable cascading (below).

Dynamic Environment Switching

Manually specifying an environment might not be as efficient in all cases. In this instance you can configure the plugin to dynamically change your environment based on the current URL.

Doing so requires specifying one or more domains for particular environments.

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-configuration', config => {
            config.setEnvironments({
                development: ['localhost', 'dev.local'],
                staging: ['staging.website.com', 'test.staging.website.com'],
                production: ['website.com'],
            });
        });

    aurelia.start().then(a => a.setRoot());
}

Changing directory and/or filename

If you want to change the location of where your configuration files are loaded from or the name, you configure it during the bootstrapping phase within your main.js.

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-configuration', config => {
            config.setDirectory('config-files'); // Will make plugin look for config files in a directory called "config-files"
            config.setConfig('mycoolconfig.json'); // Will look for mycoolconfig.json as the configuration file
        });

    aurelia.start().then(a => a.setRoot());
}

Changing cascade mode

By default, if you're using an environment value using setEnvironment, then by default if a value is not found in a particular environment it will search for it further up the configuration file sort of like inheritance. You might not want this behaviour by default, so you can turn it off by using the setCascadeMode method.

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-configuration', config => {
            config.setCascadeMode(false); // Disable value cascading
        });

    aurelia.start().then(a => a.setRoot());
}

API

The Aurelia Configuration plugin is quite simple, there are only a few methods which you will commonly use.

setCascadeMode(boolean = true)

A method for setting the cascading config value fetching mode. By default this is true. Specify false to prevent values being search in upper parts of the config when using environment values.

Usage:

config.setCascadeMode(false);

setDirectory(name)

A method for setting the location of configuration files. This method is made to be called within the bootstrapping phase.

Usage:

config.setDirectory('config');

setConfig(fileName)

A method for setting the name of the configuration file to load. This method is made to be called within the bootstrapping phase.

Usage:

config.setConfig('application.json');

setEnvironment(environment)

A method for setting the default environment. This method is designed to work within the bootstrapping phase and throughout your application.

Usage:

config.setEnvironment('development');

setEnvironments(environments)

A method for setting dynamic environments. This method is designed to work within the bootstrapping phase. You can have as many custom environments as you like by defining a new object property and supplying an array of values.

Usage:

config.setEnvironments({
    development: ['localhost', 'dev.local'],
    staging: ['staging.website.com', 'test.staging.website.com'],
    production: ['website.com'],
});

is(environment)

A method for determining if the current environment matches that of the supplied environment value. The below example will return true if the current environment is 'development' or false if it is not. Handy for doing conditional checks based on environment in your application.

Usage:

var currentEnv = config.is('development');

get(key, defaultValue = null)

A method for getting a configuration value by its key from the config file. Has an optional parameter for returning a default value if the config value could not be found. This method supports namespaced config values as well.

Usage:

var myVal = config.get('name', 'Default Name'); // If name doesn't exist, will return 'Default Name' as its value
var myVal2 = config.get('name'); // If name doesn't exist, will return null as no default value has been specified
var myVal3 = config.get('api.key', '12345678'); // Will look for "api": {"key": ""} in the configuration file and return default value if not found
var myVal4 = config.get('api.key'); // Will look for "api": {"key": ""} in the configuration file and return null if not found

set(key, val)

A method for temporarily setting a configuration value. Allows you to overwrite existing values. This will not persist changes back to the file.

Usage:

config.set('name', 'New Name');

merge(obj)

This method allows you to merge configuration options into your local configuration. Convenient if you want to load some configuration options from the server and then use them with the configuration plugin. Use this to merge in options you might get via an AJAX request into the local cached configuration options.

lazyMerge(obj)

Similar to merge, however, this method applies the configuration changes during loadConfig, rather than immediately.

mergeConfigFile(path)

Similar to merge, but takes a file path instead of a configuration object.

setAll(obj)

A method used by the plugin itself. Will set the configration object. Not advisable to use as it will delete any existing changes if not in the new obj value.

Usage:

config.setAll({ mykey: 'myval' });

getAll()

A method to get all configuration options pulled from the configuration file.

Usage:

var myConfigValues = config.getAll();

Dependencies

More Repositories

1

Open-Source-Database-Schemas

Sometimes architecting the database of your app for some can be the most difficult part. You want a schema that won't need to be rewritten a million times, a solid starting foundation for your web application.
347
star
2

Ci-Smarty

Smarty templating engine integration for Codeigniter 3.0+ with inbuilt theming and asset management.
PHP
182
star
3

Wolfauth

NO LONGER ACTIVELY MAINTAINED. An awesome role based authentication library coded from scratch to provide unrivaled auth features for Codeigniter 2 and up.
CSS
81
star
4

Free-Ideas

I come up with a lot of web application ideas. Some of them good (at least I think so) and some no doubt downright horrible. Take your pick and if you build anything from one of these ideas, let me know.
71
star
5

CI-Plugin-System

A hook based plugin system for Codeigniter 2.0+ that is very similar to the Wordpress hooks system.
PHP
68
star
6

aurelia-code-snippets

A collection of handy code snippets and resources for the Aurelia Javascript framework.
TypeScript
51
star
7

aurelia-google-maps

A highly configurable custom element for use in your Aurelia applications for inserting Google Maps into your application.
TypeScript
46
star
8

Zebra

Sick of Hacker News, Reddit too mainstream and Digg too lame? Meet Zebra an open source and stripped back news submission website like Hacker News so you can create your own independent site. Built on-top of Codeigniter PHP Framework.
PHP
38
star
9

acf-country-field

A country, city and state field for Advanced Custom Fields v4 & ACF Pro
PHP
36
star
10

pokego.run-public

The open source code for the https://pokego.run site
TypeScript
21
star
11

aurelia-typescript-plugin

A plugin skeleton for creating Aurelia plugins.
JavaScript
20
star
12

Plenty-Parser

A driver based parser library for Codeigniter. Plenty parser allows you to render templates with various template libraries.
PHP
19
star
13

aurelia-starter-node

An Aurelia and Node.js based starter application all based on the Skeleton Navigation application.
JavaScript
18
star
14

aurelia-firebase-ssr-starter

An Aurelia starting application for working with Firebase, with support for server-side rendering. Also setup with the Aurelia Store plugin for state management.
TypeScript
18
star
15

Kohana-Plugin-System

A fork of a library I wrote for Codeigniter, largely untouched or changed, just updated to be a module that can be used in Kohana 3.3.
PHP
17
star
16

aurelia-tabs

A dependency free tabs component for your Aurelia applications. Allows you to toggle between sections of content, with supports for dynamically composing views with optional data.
CSS
17
star
17

aurelia-cookie

A simplistic ES2015 class for working with cookies in Aurelia (or any modern Javascript application).
TypeScript
16
star
18

aurelia-for-real-world-web-applications-book-feedback

Post feedback as issues here on Github for the Aurelia book. Be as descriptive and honest as you like.
15
star
19

Ci-Twig

Twig templating for Codeigniter applications.
PHP
12
star
20

hive-stream

A Node.js layer for Hive that allows you to watch for specific actions on the Hive blockchain. This package also supports transferring Hive tokens.
TypeScript
12
star
21

aureliapress

Aurelia Javascript framework and Wordpress being used together. Wordpress as the API and Aurelia as the front-end consumer of the API.
TypeScript
12
star
22

aurelia-react-example

A Github repository to accompany the blog post I wrote on integrating React into Aurelia using the Skeleton Navigation repository. View a demo here: http://vheissu.github.io/aurelia-react-example/
JavaScript
10
star
23

builtwithaurelia

The http://builtwithaurelia.com site
TypeScript
9
star
24

node-osmosis-scraping-examples

Examples of scraping different sites with Node Osmosis.
JavaScript
9
star
25

aurelia-graphql-apollo

An example application showcasing how to integrate Apollo Client and Server into an Aurelia application.
TypeScript
9
star
26

aurelia-modal

A modal plugin for Aurelia with no dependencies, just vanilla Javascript.
CSS
8
star
27

aurelia-starter

Is the Skeleton Navigation starter application too heavy for you? Not concerned with demo files and styles? Then look no further.
JavaScript
7
star
28

Startpress

The best possible starting theme for Wordpress. Ever.
PHP
6
star
29

cortex-device-list

An app for showing and filtering through Neural DSP virtual devices.
HTML
6
star
30

jQuery-Hipster-Titles

Don't truncate potentially useful information in your titles and page headings with the standard ellipsis. Long titles will be truncated and when you hover them the rest of the text will be revealed to the user with a marquee like effect.
JavaScript
6
star
31

aurelia-wizard

A wizard step based plugin for Aurelia applications. Great for dealing with multiple screens of data.
HTML
6
star
32

Kohana-Theming-Module

A module for Kohana 3.3+ that allows you to implement theming functionality into your applications.
PHP
5
star
33

Gravity-Forms-infield-Labels

Allows your forms in Gravity Forms to have infield labels instead of the standard labels in Gravity Forms. By default this kind of functionality isn't support, so this plugin adds it in for you.
JavaScript
4
star
34

wpAjax

A Wordpress plugin for adding in AJAX page load support with callback events, HTML5 History API, localStorage caching, body class replacement and more.
JavaScript
4
star
35

coinmesh-address-lookup

An application built using Coinmesh to look up cryptocurrency wallet addresses and get the balance.
JavaScript
4
star
36

aurelia-select

A simple no dependency select plugin for Aurelia. No need for jQuery here.
JavaScript
4
star
37

aurelia2-plugins

A unified monorepository of every Aurelia 2 plugin that I build.
TypeScript
4
star
38

SteemEngineQL

A GraphQL API implementation for Steem Engine. Demo playground at: https://graphql.steem.services/
TypeScript
4
star
39

aurelia2-google-maps

A plugin for working with Google Maps in Aurelia 2 applications.
TypeScript
3
star
40

aurelia2-table

A port of the Aurelia v1 table plugin by @tochoromero to work with Aurelia 2
TypeScript
3
star
41

au-cardigan-ui

A robust set of UI components for Aurelia 2 applications.
TypeScript
3
star
42

aurelia-admin

An Aurelia administration setup for use in an existing application; authentication, routes, API integration, forms and more.
JavaScript
3
star
43

the-aurelia-2-book

Code examples and extra learning exercises for The Aurelia 2 Book.
TypeScript
3
star
44

Flare-Config

Flare Config allows you to use PHP, XML and yAML for Codeigniter configuration files.
PHP
3
star
45

aurelia-sortable-integration

An example application that is a companion to my blog post on integrating the Sortable library into your applications. A mock random dog/cat generator. Read the blog post here: http://ilikekillnerds.com/2015/09/aurelia-and-dragdrop-using-sortable/
JavaScript
3
star
46

aurelia2-auth

A port of the ever-popular v1 plugin aurelia-auth (https://github.com/paulvanbladel/aurelia-auth) for Aurelia 2.
TypeScript
3
star
47

steem-sync-firebase

A simple Node.js application that syncs streamed Steem blockchain content and stores it in Firebase.
JavaScript
3
star
48

aurelia-dragscroll

A port of the `vue-dragscroll` plugin by @donmbelembe
TypeScript
3
star
49

Kohana-Serial-Key-Library

Generate unique serial keys using this simple module for Kohana 3.3. Although simple, it does allow for the creation of unique serial keys with formats.
3
star
50

Gradientizer

Simple CSS3 gradients support for jquery.
JavaScript
3
star
51

Codeigniter-Session-Helper

Codeigniter has numerous helpers that save time by shortcutting calls to sometimes incredibly long OOP function names and methods. The session helper aims to make reading, setting, deleting and updating data in Codeigniter sessions easy.
PHP
2
star
52

aurelia-weather-app

An example application of a weather app in Aurelia 2.
TypeScript
2
star
53

aurelia-emoji

A value converter for converting emoji strings to actual emoji in Aurelia applications.
TypeScript
2
star
54

why-aurelia2

Why you should choose Aurelia 2 for your next Web application in 2021 (and beyond).
2
star
55

alkalinecms

Finally, an open-source CMS to rival WordPress Multisite.
2
star
56

aurelia-apollo

πŸš€ Apollo/GraphQL integration for Aurelia 2
2
star
57

aurelia2-realworld

An example Aurelia 2 application with some assumed default settings and structure.
JavaScript
2
star
58

jQuery-Tallest-Height

A simple jQuery plugin for normalising heights of one or more elements. No gimmicks, just a few lines of code to set the height of elements based on the largest height of similar elements.
JavaScript
2
star
59

aurelia2-todo

An Aurelia 2 todo application with no fancy bells or whistles.
JavaScript
2
star
60

aurelia-learning

An Aurelia application highlighting best practices and need to know information when creating Aurelia applications or upskilling developers.
2
star
61

aurelia2-admin-panel

An admin panel created with Aurelia 2 and Bootstrap
2
star
62

aurelia2-plugin-starter

A starting base for an Aurelia 2 plugin written in TypeScript, built using Rollup.
JavaScript
2
star
63

Standalone-Bootstrap-4-Flexbox-Grid-System

The Flexbox grid system from Bootstrap 4 as a standalone library if you don't want the Bootstrap cruft.
2
star
64

repo-ai

Ask questions about GitHub repositories using Langchain for Node.js.
TypeScript
2
star
65

React.js-ES6-Example

Example code for an article I wrote on using ES6 syntax with React.js.
JavaScript
2
star
66

aurelia-steem

A UI client for the Steem blockchain using Aurelia.
CSS
2
star
67

Actually-Barebones-HTML5-Template

It seems like every HTML5 starter template I've ever used is bloated with crap that I don't ever need and unnecessary comments, Javascript libraries and useless IE fallbacks. No layout is assumed, just a doctype and some meta tags.
HTML
2
star
68

aurelia-vnext-instagram-clone

Building an Instagram clone from this tutorial https://medium.com/fullstackio/tutorial-build-an-instagram-clone-with-vue-js-and-cssgram-24a9f3de0408 in Aurelia vNext to test it out.
TypeScript
2
star
69

invoicer

The invoicer.au application
TypeScript
1
star
70

aurelia-jspm-registry

A sample Aurelia application for visually searching through JSPM packages.
JavaScript
1
star
71

aurelia2-admin

A free Aurelia 2 scaffolded app with an admin panel. Uses Tailwind for styling and gives you a nice head start when building Aurelia 2 applications with an admin panel.
HTML
1
star
72

aurelia2-calculator

A functional calculator built using Aurelia 2, Typescript and Tailwind.
TypeScript
1
star
73

aurelia-firebase-authentication

An example application showcasing integration of an Aurelia CLI application and Firebase Authentication.
JavaScript
1
star
74

aurelia-living-styleguide

A living styleguide application built with Aurelia.
JavaScript
1
star
75

aurelia-ui

A set of basic browser components designed to work in Aurelia. No over-the-top abstractions, design languages to learn or foreign concepts to decipher.
1
star
76

aurelia-webpack-cli

An Aurelia CLI for starting Webpack apps
1
star
77

better-linkedin

A reimagined working prototype of what a better LinkedIn could look and feel like using Aurelia 2.
CSS
1
star
78

aurelia-typescript-starter

A starter application based on the Aurelia TypeScript repository. Support for Sass, AutoPrefixer and more with the junk removed.
JavaScript
1
star
79

aurelia-2-wordpress

An example integration showcasing how you can use WordPress as an API and Aurelia 2 for the front-end.
1
star
80

htms

Hyper Text Media Script.
TypeScript
1
star
81

neblio-contracts

An experimental code-based contract setup that parses blocks and then reacts to JSON payloads inside of the token metadata on the Neblio blockchain.
TypeScript
1
star
82

aurelia-tutorial-merges

A collection of tutorials taken from other frameworks and libraries, ported to Aurelia to showcase the simplicity of this framework.
JavaScript
1
star
83

aurelia2-outclick

A custom attribute for determining if a click originates outside of an element.
TypeScript
1
star
84

aurelia-native-dialog

A native <dialog> implementation made nice for Aurelia.
1
star
85

aurelia-crypto-prices

The accompanying code for the Aurelia 2 cryptocurrency tutorial.
JavaScript
1
star
86

tweeter

An Aurelia CLI application for creating a simple Twitter clone. Part of my book Aurelia For Real World Applications available on Leanpub.
JavaScript
1
star
87

aurelia-gpt

The Aurelia 2 codebase in queryable form using GPT.
TypeScript
1
star
88

vga

An open source prediction market on the Neblio blockchain
TypeScript
1
star
89

aurelia-loading-bar

A plugin to automatically add in a loading bar at the top of your applications with no manual configuration. Hooks into the Aurelia Fetch Client to determine whether to show or hide the loading bar.
TypeScript
1
star
90

aurelia-ssg

An experiment to statically generate an Aurelia 2 website.
TypeScript
1
star
91

aurelia-store-todo

A todo application built using Aurelia and the Aurelia Store plugin.
JavaScript
1
star
92

aurelia2-tabs

A tabs component for Aurelia 2
1
star
93

aurelia2-configuration

A port of the original plugin for v1 to work with Aurelia 2 and made way better
1
star
94

aurelia-ssr-js

A basic sample application for server-side rendering in Aurelia using Javascript, Webpack and popular libraries. This package includes libraries such as jQuery and Bootstrap, to showcase how they work as well as best practices for an SSR app in Aurelia.
JavaScript
1
star
95

hive-graphql

A GraphQL server for interacting with the Hive blockchain.
1
star
96

authless-public-apis

A collection of API's that do not require authentication, for developers wanting to learn a new framework, library or service and requiring some data to work with. Real data is always better than mock data.
1
star
97

aurelia-typescript-store-starter

A starter application for building Aurelia applications using the Aurelia Store plugin, TypeScript and Webpack.
TypeScript
1
star
98

Internet-of-Things-IoT-Starter-Kit

You're probably familiar with the concept of Iot (Internet of Things) it basically is a concept that describes internet connected devices like sensors, tags and other internet connected things. This is a starter kit for those building an Iot device and or devices. It is a simple Node/Express + MongoDB starter kit designed to give you a headstart storing sensor data and more.
JavaScript
1
star
99

Ecstatic-Wordpress

Add your content into Wordpress, setup your page structure and once you're done, deploy a completely static version of your site which can be copied and viewed anywhere. This plugin is built out of need for a site that will rarely change and need to be handed over to a client.
PHP
1
star
100

niches-ripe-for-disruption

An ongoing list of niches ripe for disruption, for developers and entrepreneurs looking for a new niche to disrupt and potentially profit off of.
1
star