Aurepa - First Apppcation

In this chapter, we will explain Aurepa starting app created in our last chapter. We will also guide you through the folder structure, so you can grasp the core concepts behind Aurepa 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 pke in most of the HTML based apps. It is a place where scripts and stylesheets are loaded.

config.js is Aurepa 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 stypng directory. You can always change the place where you keep your stypng 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.

Aurepa allows us to use JavaScript core language for class definitions. Following default example shows EC6 class.

app.js

export class App {
   message =  Welcome to Aurepa! ;
}

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:UsersusernameDesktopaurepaApp>http-server -o -c-1

Apppcation will be rendered on the screen.