Introducing Aurelia Router Loader

This is a fun little plugin I wrote not long ago for being able to specify routes in JSON files and then load them into your Aurelia application.

In my use-case recently I needed to define a bunch of routers and while I could have used child routers, at present child routers have limitations around things like triggering events and whatnot. I keep things simple by using top-level routes.

As you can imagine, a simple application can grow into 10+ routes with ease, especially with an administration panel. This is why splitting routes into separate files can make your life easier, especially on a large team.

Install

Download the plugin from the Jspm registry like so:

jspm install aurelia-router-loader

Setup

Inside of your main.js/main.ts file where you bootstrap Aurelia, simple register the plugin like you would any other Aurelia plugin.

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-router-loader', config => {
            config.defineRoutes([
                '/routes/main.json',
                '/routes/admin.json' 
            ]);
        });

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

The above example will look for two routing files inside of a root folder called “routes” one up from the src directory. You can put your routes anywhere you like. If you check out the Github repository, the readme has an example of how routes should be defined. They must be in valid JSON format and contained within an array.

Limitations

Your default route must be specified the original way inside of app.js/app.ts. This is a limitation I am working to remove. It means your first landing route must be manually specified, the rest can go into a JSON file no problem.

Also, your routes need to be valid JSON, using double quotes for properties and values. They must be defined as objects and inside of an array. A basic empty route file will look like this:

[]

The code

You can see the code here on Github.