Aurelia - First Application

In this chapter we will explain Aurelia starting app that we created in our last chapter. We will also guide you through the folder structure so you can grasp the core concepts behind Aurelia framework.

Folder Structure

• package.json represensts documentation about npm packages installed. It also shows version of those packages and enables easy way to add, delete, change version or automatically install all packages when the app needs to be shared between developers.
• index.html is deafult page of the app like in most of the HTML based apps. It is a place where scripts and stylesheets are loaded.
• config.js is Aurelia loader configuration file. You will not spend much time working with this file.
• jspm_packages is a directory for the SystemJS loaded modules.
• styles is default styling directory. You can always change the place where you keep your styling files.
• src folder is a place where you will spend most of your development time. It keeps HTML and js files.

Source files

As we already stated, the src directory is place where your app logic will be held. If you look at the default app you can see that app.js and app.html are very simple.
Aurelia allows us to use JavaScript core language for class definitions. Default example below is showing EC6 class.

app.js

export class App {
   message = 'Welcome to Aurelia!';
}

The message property is bound to the HTML template by using ${message} syntax. This syntax represents one way binding converted into string and showed inside template view.

app.html

<template>
   <h1>${message}</h1>
</template>

As we already showed in our last chapter, we can start the server by running the following command in command prompt window.

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

Application will be rendered on screen.