Aurelia + VS2015: Next Gen JS Framework in ASP.NET 5

OCTOBER 19, 2015 // By Nathan Allen-Wagner

A New Client Side JavaScript Framework…

"_______ is the best framework!" Fill in the blank. New options arrive almost daily.

With the momentum behind Angular, maybe it's not so hard to fill in that blank. But with Google rewriting it into a very different 2.0, we need to keep our options open.

Rob Eisenberg has a number of frameworks under his belt. His expertise earned him an invite to the Angular 2.0 team so that he could bring his ideas to the table. But as of November 2014, he left the team.

Why leave? …. To build something he felt is better. To build Aurelia.

"All about Angular 2.0" explains his take on the Angular 2.0 rewrite strategy. A thoughtful commentary explains why he left the Angular 2.0 project.

What is Aurelia

Aurelia is:

  • A front-end JavaScript MV* framework
  • Modern and modular
  • Tomorrow's JavaScript (ES6)
  • Usable in today's browsers with Babel
  • 2-way bindable
  • Testable
  • Supported with long-term vision
  • Built by a sizable team of rock stars

Jump to http://aurelia.io for a great intro.

Why do I care?

With so much goodness in Aurelia, it is hard to pick any one thing.

Modularity and conventions are common in Rob's arsenal. I really like Aurelia's use of conventions to support building out and wiring up the UI components. Many frameworks claim to do this, but Aurelia manages something magic.

2-way databinding is a beautiful thing. Angular 1.X brought some magic to the table. Aurelia takes this forward into the future with the help of next-gen JavaScript features like Object.observe and adaptive fallbacks as needed.

Syntax can make life beautiful or brutal. Aurelia defaults to the new ES6 syntax for your JavaScript, making classes and modules first class citizens. Prefer TypeScript, no problem. Aurelia works magic in HTML too. Templates, dynamic loading, built-in bundling, web components, and more.

Learning curve can be a factor in some frameworks. Not in Aurelia. It packs a ton of features, but keeps the right balance. It is straight forward to pick up the framework. Sharp edges and secret handshakes are kept to a minimum.

Need more convincing?

Aurelia plus Visual Studio 2015 and ASP.NET 5

ASP.NET 5 is Microsoft's vision for the future of their web stack. It is open source, cross platform, and incorporates much of the awesomeness going on outside Redmond.

Visual Studio 2015 is an awesome (but optional) editor for working with ASP.NET 5. This latest version now natively understands things like node.js, npm, gulp, and bower. I can use the best front-end frameworks alongside my C# MVC controllers and WebAPI REST services!

So let's marry up Aurelia with an ASP.NET 5 project in VS 2015, shall we? To make this easy, I've created a Yeoman generator "generator-aurelia-vs2015" that does the heavy lifting.

Step 1 - Pre-requisites

You'll need some pre-requisite software to use Aurelia and the generator. The following are required for using the Yeoman generator to add Aurelia to VS 2015. The instructions assume you are running on a recent version of Windows. See Aurelia’s getting started guide for additional details.

node.js & npm

Download and install node. The generator has been tested with node v0.12.7. I suggest you use this version of node for now, as there seems to be some issues with node 4.x releases.

yeoman

Run the following to install the Yeoman generator globally:

npm install -g yeoman

gulp

Install gulp globally:

npm install -g gulp

jspm - JavaScript Package Manager

Install and configure jspm globally:

npm install -g jspm

Then configure jspm to use your github account to work around rate limits:

jspm registry config github

node-gyp [Optional]

Install node-gyp globally. Needed to build socket.io:

npm install -g node-gyp

Python v2.x [Optional]

Download and install Python 2.7.10.

Python is needed for node-gyp to build socket.io.

3.X does not work at this time.

Visual Studio C++ compiler [Optional]

Some version of VS with the C++ compiler. Needed for node-gyp to build socket.io.

Express editions should work too.

Step 2 - Install generator-aurelia-vs2015

Run the following to install the Yeoman generator that we'll use with VS 2015:

npm install -g generator-aurelia-vs2015

I created "generator-aurelia-vs2015" to make the Aurelia skeleton app work inside VS2015. The generator does the following:

  • Pull down the Aurelia Navigation Skeleton app
  • Configure JSPM to use the wwwroot subdirectory
  • Adjust paths for html, css, and build tasks
  • Bind the gulp build into the VS2015 build events

Step 3 - Initiate the Generator in Your Project

Create a new ASP.NET 5 site in Visual Studio

  • To make things simpler, use the "Web API" template.
  • Then adjust the launchUrl in the project properties (aka launchSettings.json file). Change it to an empty string so that the project will open the Aurelia app.

"Empty" or "Web Application" asp.net 5 templates will also work, but need a couple extra steps.

Installing Aurelia Step 1

Installing Aurelia Step 2

Installing aurelia 3

 

 

Then open a command prompt and change to the project's root directory

  • This should be a directory under the solution root, inside the "src" folder.
  • Example:
    ... for a solution name "MySolution"
    ... created at c:\temp,
    ... with a project name of "MyApp",
    ... the project's root directory would be at c:\temp\MySolution\src\MyApp.

Run "yo aurelia-vs2015"

  • “yo” is the short form for invoking the Yeoman generator. The argument is the name of the generator to run.
  • The install process needs to build some dependencies from C++ source code. To do this, it needs to locate a C++ compiler. Select which version of Visual Studio has a C++ compiler installed and then wait for the generator to complete. If you don’t have the C++ components installed, you may get a few errors, but Aurelia will still work just fine. 

 alt=

 

Hit CTL+F5 to build and open the web site.

  •          Notice that the "Task Runner Explorer" pops up and shows the Aurelia build tasks running in the Gulp build scripts.

Installing Aurelia loading page

 

You should see the loading page first…

Loading Page Aurelia

 

Then you should see the Aurelia sample skeleton application.

(The following shows navigating to the “Child Router” and then to the “Github Users” link on the left nav.)

Github users profiles 

Notes

You can also launch the site without Visual Studio, from the command line:

  1. Run "gulp watch" and wait for the build to finish.
  2. Open http://localhost:9000/ in your browser to see the Aurelia skeleton sample application.

If you ran into any issues, the Aurelia getting started guide may be a good place to start. It has some useful troubleshooting tips for getting things running. You might also try creating an Aurelia app outside of VS 2015, using the instructions on the getting started guide. That will help diagnose any issues with dependencies or machine configuration.

Long path names can be an issue. It is best to avoid placing the project in a deeply nested folder. Some of the file paths from the node_modules can result in paths that are too long.

In Part 2 of this series, we'll create an Aurelia front end application that consumes a .NET WebAPI backend, all running in VS 2015 with ASP.NET 5.

Until then, Cheers!

If you’d like to contact Magenic directly to learn more about application development, email us or call us at 877-277-1044 to set up a meeting.

Categories // Custom Application Development
Tags // Aurelia, Angular, JavaScript, Web, Framework

Get Started

Contact Us