Building Apps with Aurelia: #3 Customizing Aurelia Application Startup
Hey guys :D Back with another one. This time we’ll talk about how you can customize the app startup process of Aurelia. If you remember in the previous post, we created a hello world app with Aurelia. There we created a index.html file with aurelia-app attribute in the body tag and we included system.js and config.js in the html file and bootstrapped the application by calling System.import(‘aurelia-bootstrapper’); Then we created a src folder and and added app.js and app.html to the exported App class from the app.js file with a helloMessage property and we data binded that property to the app.html file and we ran the app on our local server. And then ‘Automagically’ everything came together and we had our first Aurelia app up and running.
Speaking about things happening “Automagically”, I mentioned Aurelia follows a ‘convention over configuration’ approach when it comes to creating an app. So views and viewmodels are picked up according to its naming convention and everything works. Now let’s look at how we can change this default behavior and add our own stuff in to the app startup process.
So to add a point where we can configure the app when its starting up, add a value to the aurelia-app attribute. I am going to add main as the value. So now the body tag of index.html should look like this.
[code language=”html”]
<body aurelia-app=”main”>
<script src=”jspm_packages/system.js”></script>
<script src=”config.js”></script>
<script>
System.import(‘aurelia-bootstrapper’);
</script>
</body>
[/code]
Aurelia is now starting to look for a file called main.js which contains a function called configure by convention. So we need to create it. Create a file called main.js in the src folder and add the following configure function which takes an argument
[code language=”javascript”]
export function configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(a => a.setRoot());
}
[/code]
What this does is that it tells Aurelia to use the standard Configuration and sets the app root. Now you can run it. Before you start, if you remember in the previous hello world app, when we run the app there was a bunch of debug lines put in to the console by the Aurelia app. It looked something like this.
Don’t believe me? Undo the changes we did and run and see it for yourself. :P OR you can take my word for it. ;) After we did the above change, run it and see in the console, now you see no debug lines. So we have done some change to the default startup process.
Now for a simple example, let’s say that you want only info lines in the console. Let’s try it out. To do this, you need to import LogManager from the Aurelia framework and ConsoleAppender from Aurelia logging console. After importing, we need to add a new ConsoleAppender to the LogManager and set the log level to info in the LogManager. The new main.js looks something like this.
[code language=”javascript”]
import {LogManager} from ‘aurelia-framework’;
import {ConsoleAppender} from ‘aurelia-logging-console’;
LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.logLevel.info);
export function configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(a => a.setRoot());
}
[/code]
Now if you run the application you can see only the info lines are shown in the developer console. Take a look at the screenshot bellow. You should see something like this.
Right now, your root module is named as app (app.js and app.html) if you have it like this, by convention Aurelia will pick it up. But if you need to change the root module to a different one, you can do it. Let’s rename our root module from app to home. So rename app.js to home.js and change the class name from App to Home as well, then rename app.html to home.html
Now if you run the app, you will see 404 error on the console saying that Aurelia could not find app.js in the project. That is by convention Aurelia tries to find app.js and load it as the root module. Now we need to let Aurelia know that we need home.js as the root module. To do that go in to main.js and put in home in the setRoot function as an argument. How the configure function in the main.js should look something like this.
[code language=”javascript”]
export function configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start().then(a => a.setRoot(‘home’));
}
[/code]
Now start the app and everything should work fine. In this setRoot method you have the option to set root container in the DOM where you need your root module to be loaded, by default it is the body tag. We can specify it or leave it out. But we can specify some other element as well. Let’s do that now.
Add a div inside that body tag and put in an id. Im calling it app-container. Now your html body should look like this.
[code language=”html”]
<body aurelia-app=”main”>
<div id=”app-container”></div>
<script src=”jspm_packages/system.js”></script>
<script src=”config.js”></script>
<script>
System.import(‘aurelia-bootstrapper’);
</script>
</body>
[/code]
Now go to your main.js and in the setRoot method, after the argument where we set the root module, set the root element as well. Add document.getElementById(‘app-container’); as the second parameter to the setRoot function. You code should look like this.
[code language=”javascript”]
export function configure(aurelia) {
aurelia.use.standardConfiguration();
aurelia.start()
.then(a => a.setRoot(‘home’, document.getElementById(‘app-container’)));
}
[/code]
Now run the app and see that instead of rendering the home view inside the body tag, now it’s in the div tag we put in with the id of app-container. And everything is working as it should.
So, why would we customize the app startup process in Aurelia? There may be situations where you might need to configure plugins that you need to have in the application, or you can register global resources/services that can be used throughout the app, instead injecting them in to each viewmodel you need, or you may need additional customization in to app startup process. All these can be done by having a customized app startup. So this will become useful when you start to develop large apps with complex functionality in the future. J
So that’s it folks, that’s the end of this post. You can Download the source code from the link. And lets meet with the next post. C ya.. ;)
