WAS

WAS is an acronym for Webpack Angular Sample.The goal of this project is to offer a sample application using Angular2 with a Webpack building environment.

Instead of an empty seed or the classic Todo example, it shows a minimalist weather app that uses the Openweather API.

Quick Start

$ npm install -g webpack webpack-dev-server karma-cli protractor typings typescript tslint rimraf
$ git clone --depth 1 https://github.com/phiphou/was.git
$ cd was
$ npm install
$ npm run start

Open your browser at http://localhost:8080 and start developing in ./src/app/

Table of contents

• Quick Start
• Installing
  • Global dependencies
    • build dependencies
    • dev dependencies
  • Install
• Usage
  • Development
  • Building
  • Testing
    • Unit-Tests
    • End-to-end
    • Code coverage
• License

comment: # ( ├──src/) * our source files that will be compiled to javascript) comment: # ( | ├──main.browser.ts) * our entry file for our browser environment) comment: # ( │ │) comment: # ( | ├──index.html * Index.html: where we generate our index page) comment: # ( │ │) comment: # ( | ├──polyfills.ts * our polyfills file) comment: # ( │ │) comment: # ( | ├──vendor.ts * our vendor file) comment: # ( │ │) comment: # ( │ ├──app/ * WebApp: folder) comment: # ( │ │ ├──app.spec.ts * a simple test of components in app.ts) comment: # ( │ │ ├──app.e2e.ts * a simple end-to-end test for /) comment: # ( │ │ └──app.ts * App.ts: a simple version of our App component components) comment: # ( │ │) comment: # ( │ └──assets/ * static assets are served here) comment: # ( │ ├──icon/) * our list of icons from www.favicon-generator.org) comment: # ( │ ├──robots.txt * for search engines to crawl your website) comment: # ( │ └──human.txt * for humans to know who the developers are) comment: # ( │) comment: # ( ├──tslint.json * typescript lint config) comment: # ( ├──tsconfig.json * config that webpack uses for typescript) comment: # ( ├──typings.json * our typings manager) comment: # ( └──package.json * what npm uses to manage it's dependencies) comment: # (```)

Installing

First, make sure you've got NodeJS installed. If not, go to nodejs.org to download and install it. It will also install NPM.

If everything is ok, node -v should print your node version and npm -v should print NPM's one. Minimum requirements for this project are node >= 5.x.x and NPM >= 3.x.x.

Global dependencies

Before installing the application, you may have to install some global dependencies.

Build dependencies

Dependency	Version	Install
Typings	1.x.x	npm i typings -g
Webpack	1.3.x	npm i webpack -g
Rimraf	2.5.x	npm i rimraf -g

Dev dependencies

Dependency	Version	Install
Karma	1.x.x	npm i karma-cli -g
Protractor	4.x.x	npm i protractor -g
Tslint	3.x.x	npm i tslint -g
TypeScript	1.8.x	npm i typescript -g
Webpack dev server	1.3.x	npm i webpack-dev-server -g

You can also install all these dependencies in just one command :

$ npm i -g webpack webpack-dev-server karma-cli protractor typings typescript tslint rimraf

Install

Clone or fork this repo and run npm install to install the application.

$ git clone https://github.com/phiphou/was.git
$ cd was
$ npm install

Dependencies will be installed in the ./node_modules folder and typings will be in the ./typings folder.

Usage

Start developping

Dive into development right now by just running:

$ npm run start

This will pre-build the application, start webpack's dev server and open your browser at http://localhost:8080.

Building

You can build the app and get a "ready to deploy" release by just running:

$ npm run build

You can also get gzipped files for serving them with content-encodingwith :

$ npm run build-gz

You'll find your build in the ./dist directory.

Testing

This application use unit-tests and end-to-end tests.

Unit-Tests

You can run unit-tests by just typing :

$ npm run test

Karma is used as test-runner, you can configure it in the ./config/karma.conf.js file.

End-to-end

You can run e2e-tests by just typing :

$ npm run e2e

Protractor is used for end-to-end tests, you can configure it in the ./config/protractor.conf.js file.

Code coverage

Istanbul is used as code coverage tool. You can configure it in the ./config/karma.conf.js file.

It produce reports you'll find in the ./coverage folder each time you run unit-tests.

You can also use npm run coverage, it will run unit-tests and automatically open your browser to the generated reports.

HTML5 mode

Because this app use Angular's HTML5 mode, url rewriting is needed.

If you're deploying it on an Apache server, you can use the provided .htaccess file.

If you use other hosting system, look at this file to see what url rewriting configuration is needed.

License

MIT