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 asp.net 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

image

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

image

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!

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:
    • 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?

I think i’m gone like the wind!