Saturday, 12 March 2016

Getting started with Aurelia/node

Get Node.js - download version from node.js website.  -- full guide here

Get pakcage manager (like bower etc)
use node to install JSPM from the command line (windows)
npm install jspm -g
jspm init
(might need to return to set the following, if choose the defaults)
Sets up the package.json and configuration file. Note jspm init happens automatically if you try installing into an empty project too.
  • baseURL: This should be set to the public folder where your server will serve from, relative to the package.json file.Defaults to the package.json folder itself.
  • jspm packages folder: The folder where jspm will install external dependencies.
  • Config file path: The jspm config file for your application. Should be within the baseURL and checked in to version control.
  • Client baseURL: The URL from the browser where the public folder is hosted.
  • Transpiler: Change this option at any time with jspm dl-loader babel. Custom transpilation options can also be set through babelOptions or traceurOptions in the jspm config file.
If you ever need to reset any of these properties, you can modify the package.json, which will update the configuration when you next run jspm install or jspm init to refresh.
It is possible to run through the above prompts again at any time with jspm init -p.
get the Aurelia skeleton navigation (a starting template) and FOLLOW THE README
--download the zip and THEN choose which version you want (typescript, es6, .net etc)


You can also link Visual Studio with node to get all the benefits while writing your code.
See here
Microsoft + Node.js Tips & Tricks
General read me and installation guide 
nodejstools/wiki (includes work around for MAX_PATH error)
Package intelisense for VS
Azure Node.js dev center
Web Essentials 2015.1
Bundler & Minifier - for bundling and minifying JS, CSS and HTML files
Web Compiler - for compiling LESS, Sass, Scss, (Iced)CoffeeScript and JSX files
Image Optimizer - for lossless optimization of PNG, JPG and GIFs
Web Analyzer - for static code analysis (linting) of JS, TS, CSS and JSX files 


Starting a new Projects: 
See here for aurelia getting started page
and here for a video explaining aurelia and walking through the set up a bit.

open up a html file in Visual studio (this can be imported by going to file - add existing website -> point it to your folder
in your html file, in the body, type:
<script src="jspm_packages/system.js"></script>    -- this links the system.js file, this allows import of assest. System.import...

<script src="config.js"></script>

UI comes in 2 parts: View(HTML rendered into DOM) and View Model(written in Javascript which provides data/behaviour to the view). Databinding links both together and allows updating.

Note: when using TypeScript, Typically the first step in any new project is to add in a tsconfig.json file. This defines the TypeScript project settings such as the compiler options and the files that should be included. To do this, open up the folder where you want to store your source and add in a new file named tsconfig.json. Once in this file IntelliSense will help you along the way.

No comments:

Post a Comment