What is Aurelia?
- Two-Way data binding
- Routing and UI composition
- Dependency injection
- Both TypeScript and ES2016
- Reusable components
- MV* architecture
- Unit testing
But what I love the most about that framework is simplicity. I mean in some scenarios you can write pure TS/ES2016 code to implement your app’s functionalities. In more complex cases when you need to use dependency injection, interceptors or something else, it’s still super easy to learn that and understand. Now, I guess that some of you might think that I’m going to present some basics of Aurelia, but I won’t. That’s because I did it a few months ago (it’s written in Polish) and to be honest; those articles were awful. But besides the fact that I just don’t want to repeat myself on the blog, there’s already an excellent introduction to Aurelia on aurelia.io presented by Rob. So for all of you who are interested, I recommend watching that. If you need more detailed introduction here the Objectivity’s webinar with Rob:
If you’re still not convinced, check the video below from NDC Oslo 😉 Besides the technology, it’s worth mentioning that Aurelia’s community is impressive right now. Back in February 2016, it was a really hard to find some solutions on StackOverflow or even a good article about that framework. Now, everything looks completely different including GitHub stars (about 8.1k) or number of Aurelia’s contributor’s number.
Creating Aurelia project using the CLI
After this longish entry let’s start with the titled CLI. First thing we need to do is to get that from the NPM using the following command:
npm install aurelia-cli -g
Now, open a Command Prompt (I’ll use ConEmu instead) and type:
You should be asked about project’s name:
After that you have three options to create your project:
I’ll select the third one just to present what options do we have to configure. Next, we’re asked about the transpiler. Since I want to write my spplication in TypeScript I’m gonna select second option here:
Our next step is to choose the proper CSS processor. To be honest, CSS is not my forte, even though I did some code in SASS. That’s why I’m choosing the third option here:
Now comes the „fun” part. The unit testing configuration in the app’s project using Jasmine and Karma. Alternatively, we can treat our code as state of the art without any bugs (the description made me laugh). Therefore I’m selecting first options…
Last but not least, we have to select a code editor for coding the Aurelia:
I’ll choose the VSC for that purpose. In the last step, we should observe the summary with all selected options. All we need to do is to confirm our creation and install project dependencies! Now if you’d like to check whether it’s working, go to project’s root folder and type the following command:
After few seconds you should be able to see the „Hello world!” text served on localhost:9000. What’s more adding a –watch flag to your „run” command will run your app with BrowserSync which refresh your application every time you save changes in the editor. So, that’s it, super easy, right?
Combining Aurelia & ASP.NET Core
Every Webb application needs the backend. As you probably guessed (based on my previous posts) I’m also a .NET developer. That’s why in this section I’m going to present the way to combine Aurelia with new ASP.NET Core. First, you need to create new ASP.NET Core application (I used standard VS wizard but you can choose Yeoman if it suits you more). After creation, navigate to Web project’s folder (project_name/src/project_name) using command prompt and type the following spell:
au new --here
You’ll be asked about platform targeting. Select ASP.NET Core:
Next steps are identical to those passed in the previous section. The screen below presents the entire solution after the whole process (Web API):
Yes, it’s really that simple!
So that was a short introduction for those who have never heard of Aurelia. Next post will be also dedicated to the CLI. We’ll use that for creating a code generator for ViewModels/Views and Services 🙂 So, if you don’t want to miss that I encourage you to follow me on Twitter and Facebook where I post every new article!