A prototype to demonstrate Aurelia (v1-beta) and communicating with external APIs for TeamworkPM.
Sharing this in case anyone else is interested on a ground-up approach to a real, working SPA built using the latest version of Aurelia. The existing documentation and references available online begin with the starting point of the aurelia-skeleton project/codebase. I needed to be able to build something from scratch and go through the exercise of installing each module and package manually to learn and understand how they relate (or not) to each other.
Disclaimer - This is not intended to be authoritative information about how to implement an Aurelia app, for that I certainly defer to the Aurelia documentation and the great minds behind Aurelia. I was looking for a tutorial that walked through how to create an Aurelia app from scratch (without using the skeleton project) because building from zero is my preferred learning approach.
- NodeJS and all it entails
- JSPM - have general understanding of package managers and solid experience with NuGet
- SystemJS - have worked with RequireJS but i'm learning SystemJS is much more.
- Gulp/Grunt - general understanding of build automation
- Aurelia - I've worked with DurandalJS+KO extensively and have conceptual understanding of AngularJS.
I have checked-in every change with detailed commit comments and in small change sets. Furthermore, common-themed objectives are split into individual branches that build on each other; these range from task001 to taskXXX. To see the progression of changes step-by-step, switch to task001 and look at the commit history to review changes and comments.
- Plastic SCM for source control (sync to this github repo)
- Visual Studio 2013 Pro/Ultimate
- Microsoft ASP.NET and Web Tools v12.5.60612.0
- Resharper Ultimate v10.1
- Web Essentials 2013.5 (v2.6.36)
- Node.js Tools 1.1 for VS2013
- Grunt Launcher
- Package Intellisense
- Typescript 1.7.x
- NodeJS 4.2.3
- NPM 2.14.7
- Install NodeJS v4.2.x and verify by opening command prompt and running
node -v
- Install JSPM npm package globally by running
npm install jspm -g - Configure github API credentials to avoid rate-limiting
errors, run
jspm registry config github-> yes -> github username & paste in token. - Install git client (if not already installed) and ensure you select "Use Git from the windows command prompt", all other defaults are fine.
- git clone this repository
cdinto the project directory (~\src\MMG.Utils.TWPM.HelperSPA) and runnpm installandjspm installto install all dependencies locally.- Run the website in Visual Studio and browse to http://localhost:6187/
- Get your Api Token from your TeamworkPM installation and click 'Authenticate'.
- ECMAScript 6 (see this also)
- NodeJS
- TypeScript
- SystemJS
- JSPM - (see registry)
- HTTP fetch API (replaces XMLHttpRequest)
- Use of TeamworkPM APIs
- Aurelia
- Bootstrap 3
- Add JavaScript testing - unit and specs using Wallaby
- Implement BreezeJS for data management and querying. Possibly leverage local storage to "cache" TWPM projects->tasklists->tasks object graphs for a given project. (Reference Northwind aurelia-breeze example)
- aurelia-validation implementation (Reference github repo)
- deployment: gulp - currently I have some problems using gulp and aurelia-bundler. seems like something is misconfigured or not properly structured. Using JSPM bundle commands in NPM scripts to accomplish minification, bundling, and prep for production.
- deployment: jspm - Even with JSPM bundling of all core-js, babel, and aurealia, still have $.es6 modules being loaded separately and for some reason not being pulled from the bundle as expected.
- Aurelia Guides - From-Scractch (found this after the fact...)
- SO Posting on Minimalistic Aurelia Project
- Gitter chat room
- Pluralsight