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…

unfortunately there’s a few distractions out there that initially look promising but are rather dated upon closer inspection (e.g. 2yr old AshleyGrant/aspnet-skeleton-navigation)…
finally found github aurelia/skeleton-navigation…
then noticed issue comment “Do we even need the ASP .Net Core Skeletons any more?” which directs to…

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 good old aunt 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!

$\ClientApp\app\components\fetchdata\fetchdata.ts
```
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:

$\.vs\config\applicationhost.config

<configuration>
  <system.applicationHost>
    <sites>
      <site name="StarBeast" id="2">
        <bindings>
          <binding protocol="http" bindingInformation="*:6541:localhost" />
          <binding protocol="http" bindingInformation="*:6541:BeejBergVM" />
          <binding protocol="http" bindingInformation="*:6541:192.168.1.8" />
        </bindings>
      </site>
...

then from command line: netsh http add urlacl url=https://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!

Tags: C# Dev