Aurelia: Bootstrapping Process & App Configuration

The purpose of this post is to show how Aurelia’s bootstrapping process works behind the scenes. We will also explain how to configure its logging process, customize your app with different plugins, change your root module name, and share some other useful tricks. Let’s get started!

Bootstrap Process

In order to build an Aurelia app, a couple of scripts need to be added to the index.html file.

System.js is a module loader. It dynamically compiles ES6 to ES5 code and loads the Aurelia library as well as our own code.

Config.js contains configuration data and tells the our module loader where to find script files and how to behave. Jspm package maintains that file for us.

The next step is to add aurelia-app attribute to the body tag in the index.html file and do our first ES6 module import by adding System.import('aurelia-bootstrapper') in the last script tag. When we run the app later, the bootstrapper module makes Aurelia look for aurelia-app attribute, which is the root of an app execution by default. And just like that, app.html and app.js files are automatically loaded and rendered into the page.

Aurelia is formulated to look for the module named ‘app’ during the initialization phase unless you specify a custom module.

Let’s take a deeper look at how things are working here and open an Aurelia bootstrapper module, which is located under the JSPM_packages/npm folder.

At the bottom of the file, we see the call to the run() method. Basically, this method is looking for an aurelia-app attribute to initialize the Aurelia app.

If we look at Aurelia framework configuration file, we can see a setRoot() method defined there. Based on the path of execution we have and no arguments are passed to this method, it will set the root parameter here with a value of ‘app’. This means app.js and app.html would be rendered as a source for the root component by Aurelia Bootstrapper.

Customizing Startup

There may be a situation where you want to add your custom plugins, change the logging process, or rename the loading module from ‘app’ to something else. Aurelia is an easily maintainable framework and you can always overwrite the default configuration depending on your custom needs.

For example, let’s change app’s entry point from ‘app’ to some ‘main’ custom root configuration component. In this case, the first step would be to create a main.js file inside the src folder, and then, by adding ‘main’ value on the aurelia-app attribute, we tell Aurelia to use this configuration module to run the app. If we want the root.js file to serve as a starter point, we should specify aurelia-app=’root’ in the body tag.

This feature allows us to configure the framework to run some code prior DOM compilation, change the logging process, etc., by using method chaining.

By design, Aurelia is still going to look for the export of configure function, which takes Aurelia framework as an argument in that module. So, let's go ahead and add that function in our main.js file.

The piece of code above tells Aurelia to use standard configuration with a default set of plugins, plus some custom plugins to turn on development logging with the output to the console.

The bottom line code loads our Aurelia app and, as promised, returns a setRoot method. This method takes two arguments. The first one is the name of the module we want our app to run. By default, it's app.js/app.html root component. But we can define our own application route logic here: aurelia.start().then(a => a.setRoot('root', document.body)); The second argument on the setRoot method is the DOM node element, which is going to be the root. Document.body is the default value here.

Conclusion

Aurelia is an easily configurable framework. Every aspect of it can be changed depending on the custom needs of the developer. This makes Aurelia a very versatile framework. How are you using the customizable Aurelia features in your projects?