Get JSPM.io pakcage manager (like bower etc)
use node to install JSPM from the command line (windows)
npm install jspm -g
thenjspm 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.
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
- 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 throughbabelOptions
ortraceurOptions
in the jspm config file.jspm install
orjspm init
to refresh.
It is possible to run through the above prompts again at any time withjspm 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:
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
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