Building Apps with Aurelia: #2 Getting Started – Hello Aurelia

Building Apps with Aurelia: #2 Getting Started – Hello Aurelia

Hey guys, we will diving in to the world of Aurelia, with the simplest possible app we can build. The customary Hello World or in this case Hello Aurelia app.

Without further ado, let’s get in to it shall we? Create a folder on your disk for the project. I’ll name it as Hello Aurelia. Open up a command line and navigate in to the Hello Aurelia folder. We are gonna start off by installing JSPM (JavaScript Package Manager) locally in to this folder. If you have followed the Series Introduction post, you should have JSPM installed globally so this seems a little redundant. But reason to do this is that the machine you are deploying this codebase may or may not have JSPM installed there. So its always good to have JSPM included in the source code itself. :) So install JSPM by typing in the following in to the command line.

npm install jspm --save-dev

This will install JSPM and its dependencies in to the node_modules folder. Next up we need to initialize JSPM to start building the Aurelia app. To do that type in the following command

jspm init

This will start the initialization process by asking you some questions. Look at the screenshot bellow. It will ask to create a Package.json file, ask to enter the base URL for the server, a name for the jspm_package folder yada yada yada.. Accept all the defaults for this step. But in the last question regarding which transpiler to use, make sure bable is the options by default before accepting. Or else type in bable and hit enter. Note: If you are using TypeScript for your development, you should select TypeScript as the transpiler for the last question. Since we are not using TypeScript here, we will accept the defaults (bable in this case). After the final question jspm will initialize and create the config.js file with the settings that we defined.


Next up, we need to use jspm to install Aurelia and Aurelia Bootstrapper in to the project folder. To do that, type in the following command.

jspm install aurelia-framework aurelia-bootstrapper

this will install Aurelia in to the folder and we are ready to build our Hello Aurelia App.. :) Fire up your favorite code editor and create an index.html file in the root of the directory. This will include the base HTML and the references to system.js from JSPM to load the modules and config.js that JSPM init created which sets up the JSPM and bable environments. Also this will also include a line of javascript that kicks off the Aurelia app. Finally the body tag will have an aurelia-app attribute from Aurelia which marks this as an Aurelia app.  So the HTML in the index.html file should look like this.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Hello Aurelia</title>
  <body aurelia-app>
    <script src="jspm\_packages/system.js"></script>
    <script src="config.js"></script>
    <script> System.import('aurelia-bootstrapper'); </script>

Next we need to create a place to put our HTML view and JavaScript view models. Let’s create a folder called src in the root directory. And then we need to tell JSPM to look for modules in the src folder. To do that open up config.js file and in the paths section and drop in the following line of code.

"*": "src/*.js",

After this line of code the SystemJs module loader will look for modules in the src folder. And the path section of the config.js file should look something like this

paths: { 
  "*": "src/*.js", 
  "github:*": "jspm_packages/github/*", 
  "npm:*": "jspm_packages/npm/*"

Next up we need to create the root view model. By default Aurelia looks for root view models called App. So we need to create this App view model and the associated view. In the later posts we will learn how to override this and use our own view model as the root view model. But for now, lets go with this. So create a app.js and app.html file in the src folder. Put the following code snippet in to the app.js file

export class App {
  constructor() {
    this.helloMessage = 'Hello Aurelia!';

So this App class is going to be the root view model. This has a property called helloMessage which contains the message that we are going to bind to an element in the associated view. Now lets add the following HTML to the app.html view.


When you create a view in Aurelia you need to have the HTML in that view inside a