Angular2 ES6 seed

A simple seed project to demonstrate bootstrapping of Angular2 using ES6 (The Sixth Edition of JavaScript, known as ES6 or ECMAScript 2015). The project uses (among other things):

Prerequisites

Node.js v6.x https://nodejs.org/en/

Initial setup

From the root directory of this project, run the following commands:

npm install -g gulp
npm install

Updating when package.json changes

All JavaScript dependencies of the project are specified in the file package.json in the root folder. If this file is updated (new dependency is added, something is removed, or something is updated), you have to run the command:

npm install

to make sure you have all the latest dependencies (the folder node_modules will be updated by this command).

Running the application

Build

Initially, you will not have the folder dist. This folder will contain the built web application from the sources. To build the application, you need to run the command:

gulp dist

Simple HTTP server (with LiveReload)

To run a simple HTTP server (that will serve the built static site, contained in folder dist), in a separate console window run:

gulp start

This simple server will automatically reload the browser if something changes in the dist folder.

Ease of development

To continuously re-build the project when you change some files, in a separate console window run:

gulp watch

If the watcher is running, and you change some code, the project will be rebuilt, dist folder will be updated. Thus, if you have watch and start gulp tasks running in parallel, development of the application becomes a breathe.

JavaScript unit tests

To run JavaScript unit tests, in a separate console window run:

gulp test

This command can be further tailored for your needs. Available variations:

gulp test --once
gulp test --browser chrome
gulp test --browser phantomjs
gulp test --browser chrome --once
...

The order of parameters to gulp test does not matter.

Coverage

To gather coverage status (percent of JavaScript code covered by JS unit tests), in a separate console window run:

gulp coverage

Upon completion, this command will output in the console coverage statistics, and will generate a folder coverage with nicely formated HTML coverage report.

Linting JS code

To run ESLint (will check ES6 JavaScript code), you need to run the following command:

gulp lint

All JavaScript files in this project fall under the eye of ESLint.

Similar projects

The following projects aim to bridge the gap between Angular2 and ES6/ES7/ES.Next using 3rd party Babel plugins babel-plugin-transform-decorators-legacy or babel-preset-angular2:

Useful resources

AngularClass/awesome-angular2

License

This project is licensed under the MIT license. Please see LICENSE file for more information.

pankajbadukale / angular2-es6-seed Goto Github PK