Aurelia, NancyFX and Visual Studio Code

Having been a C, C++ and C# developer for several years, I’ve never really gotten into JavaScript for large projects. After all, you have to admit that having to do:

(function(){
    ...
})();

In order to work around JS scoping mess sucks. With ES6 (ES2015) and ES7 it seems that JS is finally cleaning up these (and other) legacy issues.

Some of the newer frameworks taking advantage the new JavaScript show promise and we may finally be able to build full stack web sites with reduced frustration. I’ve had a chance to explore Angular 2.0, React and Aurelia. Aurelia seems the cleanest thus far though React and Angular have a larger following. I figured there’d be enough documentation on how to set React/Angular elsewhere so I’d do one on Aurelia instead.

Also, while you can do lots of this stuff using the full blown Visual Studio, I’ve opted to use Visual Studio Code on MacOS. Everything here should work fine on Windows though here might be a few more setup steps to get the various tools used here properly running.

Tools

This article uses:
* Vistual Studio Code
* npm (part of NodeJS)
* DNX
* jspm
* yoeman
* grunt

Setup

You’re going to have to download and install the following to get going:

Once installed, you can add the following to your ~/.bash_profile

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

This is the MacOS equivalent to being able to launch VSCode by adding it to your windows PATH. In this case, by typing code . The rest of the setup is done in the command line.

Git Repo

Next, we can install the following as we need them but you can just as easily do so when you are ready to use the commands. On MacOS, you will have to prefix these with a sudo.

npm install jspm -g
npm install grunt -g
npm install yo -g

We’re now ready to set up a blank asp.net project. I usually set up a repo on GitHub or BitBucket first. Then go to your root Projects folder where you like to keep all your source and set up your project directory:

## Setup the folder
cd ~/Projects
mkdir aurelianancy
cd aurelianancy

## Initialize git
## Point to your git repo here. Mine's at github.com/nsainaney/aurelianancy.git 
git init
git remote add origin https://github.com/nsainaney/aurelianancy.git

## Setup a gitignore file
curl https://raw.githubusercontent.com/github/gitignore/master/Global/VisualStudioCode.gitignore -o .gitignore

## Launch VSCode
code .

Don't forget the period – it tells VSCode to launch with current directory as your workspace.

Nancy Setup

Next, we'll set up the Asp.Net Nancy project with yomen. Execute yo aspnet and you should see the following. Select Nancy ASP.NET Application and give it a name. I named mine AureliaNancy

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |      Welcome to the      |
   `---------´   |   marvellous ASP.NET 5   |
    ( _´U`_ )    |        generator!        |
    /___A___\    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of application do you want to create? 
  Empty Application 
  Console Application 
  Web Application 
  Web Application Basic [without Membership and Authorization] 
  Web API Application 
❯ Nancy ASP.NET Application 
  Class Library 
  Unit test project

You should now see an AureliaNancy folder in VSCode

Aurelia Folder Setup

Moving on, I'd like to organize my code with the following folder heirarchy:

AureliaNancy
|-- api
|--- HomeModule.cs
|-- wwwroot
|--- index.html
|- Startup.cs
|- project.json

Where the api folder will have the NancyModules and wwwroot will have my aurelia web files. We'll set up the routing later but first, let's set up the wwroot folder and I'm going to do this by also setting up Aurelia. For this, we use jspm install aurelia-framework with default values for everything except for the server baseURL:

cd AureliaNancy\
jspm install aurelia-framework

warn Running jspm globally, it is advisable to locally install jspm via npm install jspm --save-dev.

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:./wwwroot
Enter jspm packages folder [wwwroot/jspm_packages]:
Enter config file path [wwwroot/config.js]:
Configuration file wwwroot/config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

Then run jspm install aurelia-bootstrapper

At this point, you may want to add jspm_packages to your .gitignore. We can now create a static file index.html in the wwwroot folder

<html>
    <head>
    </head>
    <body>
        <h1>This is where Aurelia stuff will live</h1>
    </body>
</html>

OWIN Routing

Now we have to set up OWIN and the proper routing. For this, we first add dependancies to the project.json. We’ll need to add Microsoft.AspNet.StaticFiles and Microsoft.Framework.Runtime

{
    "dependencies": {
        "Microsoft.AspNet.Server.Kestrel": "1.0.0-beta7",
        "Microsoft.AspNet.Owin": "1.0.0-beta7",
        "Microsoft.AspNet.StaticFiles": "1.0.0-beta7",
        "Microsoft.Framework.Runtime": "1.0.0-beta6",
        "Nancy": "1.2.0"
    },
    "commands": {
        "kestrel": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.Kestrel --server.urls http://localhost:5000"
    },
    "frameworks": {
        "dnx451": {}
    }
}

VSCode may prompt you to Restore nuget packages in order to download these dependancies. You can also just execute dnu restore in a command shell.

Now to get our routing set up in our Startup.cs:

using Microsoft.AspNet.Builder;
using Microsoft.AspNet.FileProviders;
using Microsoft.AspNet.Hosting;
using Microsoft.AspNet.StaticFiles;
using Nancy.Owin;

public class Startup
{        
    string WebRoot { get; set; }
    public Startup(IHostingEnvironment env)
    {
        // We can't use Server.MapPath so let's stash the WebRoot
        WebRoot = env.WebRootPath;
    }

    public void Configure(IApplicationBuilder app)
    {   
        var options = new FileServerOptions();
        options.EnableDefaultFiles = true;
        options.FileProvider = new PhysicalFileProvider(WebRoot + "/wwwroot");
        options.StaticFileOptions.FileProvider = options.FileProvider;
        options.StaticFileOptions.ServeUnknownFileTypes = true;
        options.DefaultFilesOptions.DefaultFileNames = new[] {"index.html"};
        app.UseFileServer(options);

        app.Map("/api", api=>{
            api.UseOwin(x => x.UseNancy());
        });            
    }
}

Now, if you launch the web server with dnx kestrel or Cmd-Shift-P kestrel, you should be able to navigate to http://localhost:5000 to view the static index.html and http://localhost:5000/api to see the “Hello World” from the HomeModule.

This is a great place to stop. You can now either set up AngularJS, React or Aurelia in the wwwroot folder.

References

Aurelia Hello World the Asp.Net 5 – A great Aurelia/ASP.NET setup guide
Visual Studio Code Deep Dive – The Build 2015 video on VSCode
Visual Studio Code and Azure – Build 2015 video showing off Monaco

Musings

Thoughts, insights and occasional ramblings by a technology aficionado