Running the Aurelia Skeleton app on ASP.NET 5

On Dec 17:th Rob Eisenberg blogged about a new patch on for Aurelia. Performance, Bug Fixes and Documentation improvements. The thing that got me the most excited was the announcement that the Aurelia Navigation Skeleton had been improved for the TypeScript scenario and adapted to be run under VS Code!

The Aurelia Skeleton Nav project is a nice piece of code! Planned to be used in a production scenario, so it has all kinds of goodness setup, like a watch task, bundling, unit and integration tests.

But as I’m a Microsoft guy, it lacked one thing. A setup to be able to run it on ASP.NET 5 instead of node.

Get the Aurelia project

First off, download the project from Aurelia.io, you can get it here.

Setting up the project to run on ASP.NET 5

A few pre-requisites is needed to be able to run the project to start of with. Let’s first sort all the npm packages needed.

Installing npm packages

First off we need to install the npm packages.

As some of the packages need depend on node-gyp to be compiled, Python needs to be installed on your machine.
If you haven’t got Python installed, download and install it. Version 2.7.10 is the recommended install for node-gyp.
Node-gyp is also need a C++ compiler. If you are running Windows 10, install any version of Visual Studio 2015 that you have got access too and make sure the C++ packages are included in the install.
After installing Python set an environment variable named: GYP_MSVS_VERSION and set the value to: 2015.

Now make sure everything is installed properly by running npm install from the root of the project.

Install global npm dependencies>

The project is dependent on having a few packages installed globally as well, these being gulp and jspm.
To sort this, run the following:
npm install -g gulp
npm install -g jspm

Installing Aurelia with jspm

Now we need to install the Aurelia packages, and a few others. This is done by running the following form the root of the project:
jspm install

Make sure everything installed properly

Test the major part of the toolchain by building the project. Do this with:
gulp build

Setting up the ASP.NET 5 bits

If you are new to ASP.NET 5 and haven’t got the run-time installed, get it here.

First off we need to add two files, project.json and Startup.cs.
Mine looked like the following:

{
  "version": "1.0.0-*",
  "compilationOptions": {
    "emitEntryPoint": true
  },
  "tooling": {
    "defaultNamespace": "Aurelia_Skeleton"
  },

  "dependencies": {
    "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
    "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
    "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
  },

  "commands": {
    "web": "Microsoft.AspNet.Server.Kestrel"
  },

  "frameworks": {
    "dnx451": { },
    "dnxcore50": { }
  },

  "exclude": [
    "node_modules"
  ],
  "publishExclude": [
    "**.user",
    "**.vspscc"
  ]
}

and

using Microsoft.AspNet.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace Aurelia_Skeleton
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app)
        {
            app.UseIISPlatformHandler();
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }

        // Entry point for the application.
        public static void Main(string[] args) => Microsoft.AspNet.Hosting.WebApplication.Run<Startup>(args);
    }
}

After adding these files, go back to the command line and run the following:
dnu restore
dnu build

Given everything is installed correctly, the build should have gone ok and we can now start the web server with:
dnx web

Now everything should be installed, setup and ready to go, so just open a browser and hit http://localhost:5000 and the app should be loading!

Get the code

I forked the project and introduced my changes, you can get the code from my GitHub repository.

This was a quick setup and it’s not of production quality like the stuff from the Aurelia team, but it’s hopefully a start for those who want to play around with Aurelia on ASP.NET 5.

Happy Coding! 🙂