Building Apps with Aurelia: #1 Series Introduction

Published in

The KVK Blog

4 min readJun 5, 2016

Hey Guys :D Found some time to get back to writing and I am back at it with a new framework for the modern web that is gaining a lot of traction in the community. Its Aurelia.. ;)

Aurelia is a JavaScript client framework that enables you to create applications for mobile and desktop. It’s a framework that leverages the latest web technologies available and simple conventions to make your developer experience smoother and focused on creating powerful web applications.

Aurelia is a framework that allows you to create next generation JavaScript applications by using the capabilities that is provided by the framework. It’s a framework that is written in ES2016 which leverages the technologies of the future. It’s not a giant framework like some other frameworks out there, Aurelia is composed of more focused, smaller modules that developers can use together to build great solutions. It has a convention over configuration approach which reduces a ton of configuration code you need to write to get things moving. You can use ES5. ES2015, ES2016 or TypeScript to write Aurelia apps and with features like Two-way databinding, Extensible HTML, Routing and UI Composition, Testability with powerful dependency injection container allows you to create the next generation applications easier and with enhanced developer experience. You can find more about Aurelia at http://aurelia.io and by going through the documentation.

The purpose of this series of articles is to give you an understanding of how you can use Aurelia to build your applications. We will start at the very beginning and cover the basics of the framework and dive deeper in to more advanced use cases of the framework. I will add more articles to this series as I go through Aurelia framework and learn its uses. :) so this will be a journey for you as well as it’s for me.

Setting Things Up

Before we start building Aurelia apps we need to set up our developer environment first. This is really easy process. Follow these steps if you don’t have everything set up.

Install Node.js

Go to https://nodejs.org and download the installer depending on which operating system you are running. Install node.js and you are ready to go with node and npm.

Install JSPM (JavaScript Package Manager)

Next we need to install JSPM in your development environment. Aurelia will have bower and other package management support but the Aurelia team recommends that we use npm and JSPM for the package management. JSPM not only does package management, it also does the module loading for Aurelia. It uses SystemJs for its module loading and also does the transpiling your code in to ES5 code since you will be using ES2015 to write your code.

We are going to use npm to install JSPM on your development machine. To do that just type in the following and install JSPM globally.

[code language=”bash”]
npm install -g jspm
[/code]

Even though we Installed JSPM globally in to the development machine we would install JSPM locally in to each project we create as you would see when you follow the series. This is because even if you have JSPM installed globally the machine you would deploy the code to or the person who you share your code with might not have JSPM installed and by having JSPM as a dependency locally he/she can install it with npm.

After you installed JSPM you need to configure it with Git. This is because it is using Git to pull down packages from GitHub. You need to have a GitHub account for this. So if you don’t already have one go create one :P

To configure JSPM with your GitHub credentials, type in the following to a command line.

[code language=”bash”]
jspm registry config github
[/code]

then it will ask if you want to set up GitHub credentials, and obviously yes. we do.. :D so accept the default and provide your GitHub username and password. Then it will ask to test the credentials so go ahead and do it to make sure it’s working. And that’s it ;)

Additional Stuff

In addition to node and JSPM I am installing gulp and http-server. Gulp as a task runner we can use later and http-server is a command line utility that we can use to spin up simple web server to host our development code to test it out. Install them like this.

[code language=”bash”]
npm install -g gulp http-server
[/code]

This will install both Gulp and http-server globally so you can access it via command line anyway on your machine. So that is it my friends :D that’s the end of the setting things up for building apps with Aurelia.

So guys, hopefully you will follow this series and learn how to build apps with Aurelia along with me. Hope to see you guys soon with another post. You can find all the posts in this series linked bellow. :)

Building Apps with Aurelia: All Articles