Creating an application from scratch with Aurelia

Vidal Vasconcelos — Thu, 17 Jun 2021 20:22:47 +0000

I was introduced to Aurelia there by 2016, but at the time I did not give much importance, another javascript framework? I do not need this. A lot has changed since then, and my opinion has changed radically on this aspect of the javascript community. I currently love reading about new perspectives and ways of thinking and working with javascript.

First, let's the definitions, Aurelia is a Javascript framework for creating web applications, mobile, and desktop that takes advantage of simple conventions to empower your creativity. This is the quote from Aurelia's official website, but in fact, it's a collection of modules that will help you create any Javascript or Typescript application.

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 the

tag 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 tsconfig.json and 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…

You can check the complete code on my Github: vidalvasconcelos and also the material on which I am based, such as the site Aurelia and Dwayne Charrington articles.

DEV Community: Vidal Vasconcelos

Creating an application from scratch with Aurelia