Table of Content
ENVIROMENT
1. Git
Install git command line tools git
2. Node.js
Install globally gulp, jspm, tsd.
Run command npm install -g gulp jspm tsd
3. C#
1. Install VS 2015 with latest patches.
2. Update to latest RC release of asp.net 5 using dnvm in console `dnvm upgrade`.
Version should be '1.0.0-rc1-update1'
UI DEVELOPMENT
We are using Typescript and Angular 2. For build purposes we are using Gulp and SystemJs with JSPM package manager
Running Gulp Tasks
Tasks should be run in console via gulp $$$$$
where $$$$$ is name of command.
Core Tasks
gulpfile.js
contains all core tasks. These are some of them:
- watch:dev - runs watch task that monitores typescript and styles files in application folder. task will recompile those on change.
- compile:dev - single run of compilation for typescript and styles files for dev enviroment. Does not bundles or inliness any of source file. Does not rebuilds theme.
- recompile:dev - runs same as compile:dev and cleans all dev folders before run. Refer to clean:dev task
- compile - runs compilation of application and theme files as well.
- recompile -runs same as compile task and cleans all before run. Refer to _'clean' task
- production - cleans compilation file. Rebuilds all styles: theme and app styles. Inlines all app source files, bundles and minifies into sinle file that is published into destination folder.
Clean
clean.js
contains following tasks:
- clean - cleans everything. Runs clean:dev, clean:styles, clean:prod, clean:tests.
- clean:appstyles - task to clean all style files (
*.css
and*.map.css
) from source(app
) folder - clean:theme - task to clean all compiled theme styles (
*.css
and*.map.css
) from 'assets' folder - clean:styles - cleans compiled styles. Runs clean:theme and clean:appstyles
- clean:ts - task to clean all dev build files (
*js
and*.map.js
) from source(app
) folder - clean:dev - cleans all compiled files from source folder. Runs clean:ts and clean:appstyles
- clean:prod - taks to clean all from distrubution folder (
dist
) - clean:tests - taks to clean all from test folder
Compile App
Typescript code compilation is not required during development process.
compile.js
contains following tasks:
- compile:ts - taks to compile all
.ts
files into.js
. Also generatesmap
files. This taks is not required forDevelopment
code run. Use it only if you suspect that.ts
issues or to check if application is able to generate correct.js
from your files. However you might want to run this one to do quality check for your code. Taks will show you all linting and typescript errors found. - watch:ts - watch task for typescript files. Will recompile, check linting, report errors for all typescript files on fly. Useful for development*
- compile:inline - taks is inlining all Angular 2 components templates and styles and creates
.js
files for them. Task is essential part of production flow* - compile:tests - runs compilation of all files into test folder. Part of unit test process.
Code Quality
App is using tslint to run checks on code quality of Typescript files.
Best way to check all your .ts
code is to run watch:ts and fix any errors.
linter.js
contains following task:
- lint:ts - task that peforms single check of
.ts
files and report to console. If errors appear you will also hear bip message - watch:lint:ts - task that starts a watcher on
.ts
files and runslint:ts
on every save of any files. Useful for development.
Build for Production
Code build and Production
compilation are performed using SystemJs Builder with use of jspm.config.js
(see below).
Source code of builder task is located in build.js
:
- build:bundle - creating SFX (Static) bundle of application.
App will switch to bundled files based on ASPNET_ENV Environment varieble.
Files included for each environment are configured in _layout.cshtm
file. More on this Asp.net 5 Multiple Envornments.
To test locally you can either change local env varieble or run app using dnx web-prod
for Production or dnx web-dev
for Development.
Note that for Production you will need to build bundles first by running production task.
Asp.Net publishing tool (dnu) will run production task automatically as prepublish step. More on that Asp.net 5 Deployment
Build Documentation
App can generate help documentation for Typescript files using TypeDoc. Source code in located in docs.js
. This files is generated with it's help as well.
- build:docs - rebuilds Typescript documentation
- serve:docs - starts static server that can serve documentation. Typically serves from
localhost:3000
CONFIGURATION
Asp.net 5 configuration respects ASPNET_ENV Environment varieble
- project.json - ASP specific config
- appsetttings.json - Application config
Client and build system configuration
- project.json - npm project. Also holds jspm (configuration)[https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm].
- jspm.config.js - (SystemJs configuration file)[https://github.com/systemjs/systemjs/blob/master/docs/config-api.md]. Backbone for all client side.
- tsconfig.js - (Typescript configuration file)[https://github.com/Microsoft/TypeScript/wiki/tsconfig.json]
- options.js - gulp build configuration file. Use this file to configure all paths and defaults build system.
- tslint.json - tslint configuration file. Changes here effects everyone. Don't change unless really know what you are doing.