vid-webpack-master/README.md

   1 # angular-webpack
   2
   3 [![Dependency Status](https://david-dm.org/preboot/angular-webpack/status.svg)](https://david-dm.org/preboot/angular-webpack#info=dependencies) [![devDependency Status](https://david-dm.org/preboot/angular-webpack/dev-status.svg)](https://david-dm.org/preboot/angular-webpack#info=devDependencies)
   4 [![Join the chat at https://gitter.im/preboot/angular-webpack](https://badges.gitter.im/preboot/angular-webpack.svg)](https://gitter.im/preboot/angular-webpack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
   5
   6 A complete, yet simple, starter for Angular v2+ using Webpack.
   7
   8 This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using [Webpack](http://webpack.github.io/) for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.
   9 * Best practices in file and application organization for [Angular](https://angular.io/).
  10 * Ready to go build system using [Webpack](https://webpack.github.io/docs/) for working with [TypeScript](http://www.typescriptlang.org/).
  11 * Testing Angular code with [Jasmine](http://jasmine.github.io/) and [Karma](http://karma-runner.github.io/).
  12 * Coverage with [Istanbul](https://github.com/gotwarlost/istanbul)
  13 * End-to-end Angular code using [Protractor](https://angular.github.io/protractor/).
  14 * Stylesheets with [SASS](http://sass-lang.com/) (not required, it supports regular css too).
  15 * Error reported with [TSLint](http://palantir.github.io/tslint/) and [Codelyzer](https://github.com/mgechev/codelyzer).
  16 * Documentation with [TypeDoc](http://typedoc.org/).
  17
  18 >Warning: Make sure you're using the latest version of Node.js and NPM
  19
  20 ### Quick start
  21
  22 ```bash
  23 # clone our repo
  24 $ git clone https://github.com/preboot/angular-webpack.git my-app
  25
  26 # change directory to your app
  27 $ cd vid-app
  28
  29 # install the dependencies with npm
  30 $ npm install
  31
  32 # start the server
  33 $ npm start
  34 ```
  35 go to [http://localhost:8181](http://localhost:8181) in your browser.
  36
  37 # Table of Contents
  38
  39 * [Getting Started](#getting-started)
  40     * [Dependencies](#dependencies)
  41     * [Installing](#installing)
  42     * [Developing](#developing)
  43     * [Testing](#testing)
  44     * [Production](#production)
  45     * [Documentation](#documentation)
  46 * [Frequently asked questions](#faq)
  47 * [TypeScript](#typescript)
  48 * [License](#license)
  49
  50 # Getting Started
  51
  52 ## Dependencies
  53
  54 What you need to run this app:
  55 * `node` and `npm` (Use [NVM](https://github.com/creationix/nvm))
  56 * Ensure you're running Node (`v6.x.x`+) and NPM (`3.x.x`+)
  57
  58 ## Installing
  59
  60 * `fork` this repo
  61 * `clone` your fork
  62 * `npm install` to install all dependencies
  63
  64 ## Developing
  65
  66 After you have installed all dependencies you can now start developing with:
  67
  68 * `npm start`
  69
  70 It will start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The application can be checked at `http://localhost:8181`.
  71
  72 As an alternative, you can work using Hot Module Replacement (HMR):
  73
  74 * `npm run start:hmr`
  75
  76 And you are all set! You can now modify your components on the fly without having to reload the entire page.
  77
  78 ## Testing
  79
  80 #### 1. Unit Tests
  81
  82 * single run: `npm test`
  83 * live mode (TDD style): `npm run test-watch`
  84
  85 #### 2. End-to-End Tests (aka. e2e, integration)
  86
  87 * single run:
  88   * in a tab, *if not already running!*: `npm start`
  89   * in a new tab: `npm run webdriver-start`
  90   * in another new tab: `npm run e2e`
  91 * interactive mode:
  92   * instead of the last command above, you can run: `npm run e2e-live`
  93   * when debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.
  94   * you can learn more about [Protractor Interactive Mode here](https://github.com/angular/protractor/blob/master/docs/debugging.md#testing-out-protractor-interactively)
  95
  96 ## Production
  97
  98 To build your application, run:
  99
 100 * `npm run build`
 101
 102 You can now go to `/dist` and deploy that to your server!
 103
 104 ## Documentation
 105
 106 You can generate api docs (using [TypeDoc](http://typedoc.org/)) for your code with the following:
 107
 108 * `npm run docs`
 109
 110 # FAQ
 111
 112 #### Do I need to add script / link tags into index.html ?
 113
 114 No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.
 115
 116 #### How to include external angular libraries ?
 117
 118 It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/preboot/angular-webpack/blob/master/src/main.ts) of your application.
 119
 120 #### How to include external css files such as bootstrap.css ?
 121
 122 Just install the lib and import the css files in [vendor.ts](https://github.com/preboot/angular-webpack/blob/master/src/vendor.ts). For example this is how to do it with bootstrap:
 123
 124 ```sh
 125 npm install bootstrap@next --save
 126 ```
 127
 128 And in [vendor.ts](https://github.com/preboot/angular-webpack/blob/master/src/vendor.ts) add the following:
 129
 130 ```ts
 131 import 'bootstrap/dist/css/bootstrap.css';
 132 ```
 133
 134 # TypeScript
 135
 136 > To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.
 137
 138 ## Use a TypeScript-aware editor
 139
 140 We have good experience using these editors:
 141
 142 * [Visual Studio Code](https://code.visualstudio.com/)
 143 * [Webstorm 11+](https://www.jetbrains.com/webstorm/download/)
 144 * [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
 145 * [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)
 146
 147 # License
 148 The vid-webpack-master project is provided under the Apache License, version 2.0 (Apache-2.0). It includes code from the angular-webpack template files, which were originally provided under the MIT license.
 149