• 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

Introducing Aurelia Router Loader

Aurelia 1 · March 3, 2016

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.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ats
Ats
6 years ago

Regarding the limitations You mentioned – if i understand You correctly i have cure for all of them ๐Ÿ˜‰
Why don’t You just define routes in another file that exports them, and include them through imported variable, that contains “normal” routes written in javascript/typescript, just the content is externalized to another file?

0
Dmitriy
Dmitriy
6 years ago

bought your book today , very cool keep it up

0
Kristian Mandrup
Kristian Mandrup
5 years ago

Could you please, please write an other post where you go more in depth on the router, using child routers etc.
How do you build your routing logic/routers for large scale (nested) apps.
What are the best practices you have uncovered.
I feel the router is the biggest stumbling block for getting started with Aurelia beyond Hello World, and the biggest mystery… Very hard to find docs on anything beyond having one single App router, monolithic style.
Cheers ๐Ÿ™‚

PS: In frustration I’m embarking on a new project “Not your grandfather’s router” – building an Aurelia router that makes sense, is really composable and provides sane error messages which actively help you track down what you might have screwed up… (or just made a typo) – inspired by the error message system of Elm, using reg exp and perhaps even fussy matching on names to see what you might have intended…

Let me know if you wanna help out on this project ๐Ÿ˜‰

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 ยท Dwayne Charrington ยท Log in

wpDiscuz