Aurelia was created by Rob Eisenberg who created the Durandal and Caliburn and has great similarities with the Angular 2, which is not surprising since Rob worked on the team that developed Angular 2.
But the big difference between the two is the philosophy of how the developer interacts as the framework. In Aurelia, the conventions are above the settings which leave the developer free to focus on the business rules.
So let's focus on the code that is what matters most to us, create a folder and boot your git repository and inside it install the dependencies we'll need, running.
Now we have a ./node_modules with all of our dependencies, add it to your
.gitignore just to not forget.
Our app will be a SPA, which means that the browser needs an index to hit and, load all files from application, so let’s create an index.html at the root of our application.
Basically a standard HTML boilerplate, however, if you notice thetag it contains an unusual property: aurelia-app="main". Yes, like other frameworks, Aurelia also has an entry point where will execute code so by placing this property Aurelia will inject its contents into the DOM and will invoke its start main module.
The main module invoke “boot” basically loads the default settings and switches on the debug mode that will spit the logs on the console.
This file may end up getting complex, but at first, we just need to set root our app.ts, which I prefer to keep in a specific folder called app, the only changes are the path that you pass as a string, but feel free.
My app.ts basically is a Typescript class, which has a unique string property called message.
Remember the configurations conventions? Simple like this, this class already has bound with my template app.html.
More before running our app exists a problem, we have not yet configured the Webpack to process our Typescript and Aurelia files. For this to work, let’s now create some necessary files like
webpack.config.js, I will not go into detail about
tsconfig.json, json it deserves a separate post on it.
It basically informs the webpack which loaders will be responsible for processing each type of file and where we want it to spit out the processed files, which in our case will be the folder at the root of our project.
Now let’s run our app…