Aurelia - First Application

In this chapter, we will explain Aurelia starting app 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 represents documentation about npm packages installed. It also shows the version of those packages and provides an easy way to add, delete, change version or automatically install all packages when the app needs to be shared between developers.

• index.html is the default 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 the directory for the SystemJS loaded modules.

• styles is the 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 the 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. Following default example shows EC6 class.

app.js

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

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

app.html

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

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

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

Application will be rendered on the screen.