Creating your first Aurelia 2 application

At the time of writing this, Aurelia 2 is almost about to have its alpha release. Even so, if you’re reading this in the future and I have forgotten to update this post, everything here should still apply (some of the configuration options might change).

Fortunately, Aurelia 2 makes creating a new application from scratch easy. You can use Webpack, TypeScript, Babel and choose the way you write CSS and testing strategies as well (Jest, Cypress, etc).

Unlike Aurelia 1 and other frameworks/libraries, you don’t need to install anything. You can still bootstrap a new Aurelia 2 application from the command line, the only requirement needed is NodeJS and Npm installed.

To get started, open up a command line window and run the following:

npx makes aurelia

Now, what you will see will be a variation of the following depending on your operating system and what command prompt/terminal you are running the npx makes aurelia command in.

Now, you will be presented with 3 options. If you’re not wanting to configure everything and you just want something fast, the first two options will give you a TypeScript or Javascript based starter, minimal questions asked of you.

I always opt for the custom option, I love being able to choose what bundler I use, what language-variant, what testing strategy I want to implement and other choices.

If you choose the default option, many of the questions will be somewhat easy to follow. Do you want Webpack, do you want to use TypeScript and so on. The CSS question is where some users might get confused. Do you use Shadow DOM with Aurelia 2 or do you opt for CSS Modules?

One of the limitations with Shadow DOM is that third-party libraries which rely on global styles (such as Bootstrap) require a little configuration work to ensure those global styles work. This is because Shadow DOM works on the concept of boundaries, attempting to solve the issues that can arise from CSS’ global approach.

If the thought of Shadow DOM and the complexities it can add scares or deters you, CSS Modules is a valid alternative. For CSS Modules, your CSS classes will be rewritten to have additional random letters/numbers in the class names, this makes them all unique.

We are towards the end of the CLI now, you will be asked if you want a bare minimum app or one with direct routing. If you know your way around Aurelia 2, choose bare minimum. However, if you’re trying out Aurelia 2 for the first time or not overly familiar with its new concepts, choose direct routing.

The direct routing is a new featured added into the router which works on the concept of zero-configuration routes. Routing is traditionally very configuration heavy (even Aurelia 1 was), this makes it so you can just route to components automatically registered in DI. It’s very cool and recommended.