Aurelia – initial paper cuts

Baseline Wishlist for Dev Tools & Architecture

  • JS Framework: Aurelia (i’m coming from KnockoutJS most recently and keep hearing good things about Durandal v2, aka Aurelia … namely, clean conventions based on vNext web standards, etc.)
    • JS “evolution”: TypeScript (i’m jacked TS v2.1 finally achieved transpiled async/await support for ES5)
  • IDE: Visual Studio 2017 (currently RC2)
  • Web Server: Asp.Net Core, and generally try to track on .Net Standard / Core

Base Installs

(followed this guide up to the create project step)

  • latest nodeJs, this brings npm (node -v, i’m on v7.3.0)
  • latest jspm: npm install -g jspm (jspm -v = 0.16.48)
  • latest typescript: npm install -g typescript (tsc -v = Version 2.1.4)
  • latest typings: npm install -g typings (typings -v = 2.1.0)
  • latest .Net Core (equivalent github downloads page) (dotnet --version: 1.0.0-preview4-004233)
    • However, my yeoman generated csproj was complaining about missing core 1.1.0 dependencies so needed to get new bits… after installing .Net Core v1.1.0, dir C:\Program Files\dotnet\shared\Microsoft.NETCore.App showed i had a new 1.1.0 folder but dotnet --version still shows 1.0.0-preview4-004233 … need to be a little more enlightened about how this stuff sits

Project Starter Template

went looking for a more streamlined template project story than what was current as of the above guide…

Microsoft ASP.NET Core JavaScript Services which, AWESOME, includes yeoman generator specifically for Aurelia -AND- Visual Studio 2017 CSPROJ style, no way!!
(nice! they just updated the JS Services docs to include Aurelia 4 days ago :)
npm install -g yo generator-aspnetcore-spa
cd your_new_empty_project_directory
yo aspnetcore-spa


Debugging on iOS Chrome

No iOS browser provides any debugger tools -BUT- on Mac, we can fire up the Xcode iOS Simulator => Browser and attach Mac Safari to get full debug tooling!

  • Install Xcode from the App Store (free)
  • Launch Simulator from Xcode > Xcode main menu > Open Developer Tool > Simulator
    • fire up your url in iOS Chrome/Safari
  • Stack-o post for Mac Safari remote debug config – the gist:
    • Mac Safari > Preferences > Advanced > “Show Develop menu in menu bar”
    • Mac Safari > Develop menu > Simulator > choose desired browser tab by url


Aurelia Fetch Client and uncle PolyFill

  • i needed above js debug because my app skeleton’s “Fetch data” page worked on Windows Chrome but failed on iOS Chrome…
  • wound up finding this issue (over 1yr old)
    referring to fetch polyfill npm install whatwg-fetch --save… which sure enough, along with Aurelia’s Bring your own polyfill docs, wound up resolving my issue – yay!
    [crayon title=”$\ClientApp\app\components\fetchdata\fetchdata.ts” toolbar=”always”]
    import ‘whatwg-fetch’; //this is the new line
    import { HttpClient } from ‘aurelia-fetch-client’;


Misc Configs

  • handy reminder, enable external access to IISExpress site (e.g. so a mobile on your LAN can get to it):
    • first add site binding:
      [crayon title=”$\.vs\config\applicationhost.config” toolbar=”always”]


    • then from command line:
      netsh http add urlacl url=http://address:port/ user=everyone

Off to the races?

basic working project.
working server side debug.
working client side debug.
working ajax call.
fresh copy of “Learning Aurelia” on the Kindle

I’m gone like the wind!