Skip to content

Commit

Permalink
first version
Browse files Browse the repository at this point in the history
  • Loading branch information
ocombe committed Jan 1, 2016
1 parent ed1b76e commit d1607e0
Show file tree
Hide file tree
Showing 27 changed files with 1,065 additions and 0 deletions.
24 changes: 24 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,css,scss}]
charset = utf-8

# 4 space indentation
[*.{js,css,scss}]
indent_style = space
indent_size = 4

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml,bower.json}]
indent_style = space
indent_size = 2
55 changes: 55 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Users Environment Variables
.lock-wscript

# OS generated files #
.DS_Store
ehthumbs.db
Icon?
Thumbs.db

# Node Files #
/node_modules
/bower_components

# Coverage #
/coverage/

# Typing #
/src/typings/tsd/
/typings/
/tsd_typings/

# Dist #
/dist
/public/__build__/
/src/*/__build__/
__build__/**
.webpack.json

# Doc #
/doc/

# IDE #
.idea/
*.swp
152 changes: 152 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,154 @@
# ng2-webpack
A simple starter for Angular 2 using webpack

Inspired by [Angular2 Webpack Starter](https://github.com/AngularClass/angular2-webpack-starter) & [Angular 1 Webpack demo](https://github.com/angular-tips/webpack-demo).


This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a [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.
* Best practices in file and application organization for [Angular 2](https://angular.io/).
* Ready to go build system using [Webpack](https://webpack.github.io/docs/) for working with [TypeScript](http://www.typescriptlang.org/).
* Easily add new components using [Angular 2 cli](https://github.com/angular/angular-cli).
* Testing Angular 2 code with [Jasmine](http://jasmine.github.io/) and [Karma](http://karma-runner.github.io/).
* Coverage with [Istanbul](https://github.com/gotwarlost/istanbul)
* End-to-end Angular 2 code using [Protractor](https://angular.github.io/protractor/).
* Stylesheets with [SASS](http://sass-lang.com/).
* Error reported with [TSLint](http://palantir.github.io/tslint/).
* Documentation with [TypeDoc](http://typedoc.io/).


```coffeescript
Warning: Make sure you're using the latest version of Node.js and NPM
```
[Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/)
### Quick start
> Clone/Download the repo then edit `app.ts` inside [`/src/app/app.ts`](/src/app/app.ts)
```bash
# clone our repo
git clone https://github.com/ocombe/ng2-webpack.git
# change directory to our repo
cd ng2-webpack
# install the repo with npm
npm install
# start the server
npm start
```
go to [http://localhost:3000](http://localhost:3000) in your browser
# Table of Contents
* [Getting Started](#getting-started)
* [Dependencies](#dependencies)
* [Installing](#installing)
* [Running the app](#running-the-app)
* [Add new components with Angular 2 cli](#add-new-components-with-angular-2-cli)
* [Contributing](#contributing)
* [TypeScript](#typescript)
* [Frequently asked questions](#frequently-asked-questions)
* [Support, Questions, or Feedback](#support-questions-or-feedback)
* [License](#license)
# Getting Started
## Dependencies
What you need to run this app:
* `node` and `npm` (`brew install node`)
* Ensure you're running the latest versions Node (`v4.1.x`+) and NPM (`2.14.x`+)

## Installing
* `fork` this repo
* `clone` your fork
* `npm install` to install all dependencies

## Running the app
After you have installed all dependencies you can now run the app with:
```bash
npm start
```

It will start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://localhost:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/`).

## Add new components with Angular 2 cli
* `npm install -g angular-cli` to install Angular 2 cli
* Add a new component with: `ng generate component my-new-component`
* Add a new service with: `ng generate service my-new-service`
* Add a new pipe with: `ng generate pipe my-new-pipe`


## Other commands

### build files
```bash
npm run build
```

### build files and watch
```bash
npm run watch
```

### run tests
```bash
npm test
```

### run webdriver (for end-to-end)
```bash
npm run webdriver-start
```

### run end-to-end tests
```bash
# make sure you have webdriver running and a server for the client app (using `npm start` before running the e2e tests for example)
npm run e2e
```

### generate documentation
```bash
npm run docs
```

# TypeScript
> To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
## Use latest TypeScript compiler
TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.

```
npm install --global typescript
```

## Use a TypeScript-aware editor
We have good experience using these editors:

* [Visual Studio Code](https://code.visualstudio.com/)
* [Webstorm 11+](https://www.jetbrains.com/webstorm/download/)
* [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
* [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)

# Support, Questions, or Feedback
> Contact us anytime for anything about this repo or Angular 2
* [Chat: AngularClass.slack](http://angularclass.com/member-join/)
* [Twitter: @AngularClass](https://twitter.com/AngularClass)
* [Gitter: AngularClass/angular2-webpack-starter](https://gitter.im/angularclass/angular2-webpack-starter)


# Other Seed/Starter/Example Repos
* [angular2-webpack-starter (AngularClass)](https://github.com/angularclass/angular2-webpack-starter)
* Client/Server, Webpack, TypeScript, TSD, Protractor, Karma, Jasmine
* [ng2-play (Pawel Kozlowski)](https://github.com/pkozlowski-opensource/ng2-play)
* Client only, Minimalist, SystemJS, Gulp, TypeScript
* [angular2-seed (Minko Gechev)](https://github.com/mgechev/angular2-seed)
* Client only, SystemJS, Gulp, TypeScript, TSD, Versioned, Env Dev/Prod
* [ng2-lab (Roland Groza)](https://github.com/rolandjitsu/ng2-lab)
* Client only, ES6, TypeScript, Firebase, Gulp, Ci, TSD, TSLint
* [ng2-jspm-seed (Rob Wormald)](https://github.com/robwormald/ng2-jspm-seed)
* Client only, TypeScript, TSD, Gulp, JSPM, Minimalist
* [babel-angular2-app (Shuhei Kagawa)](https://github.com/shuhei/babel-angular2-app)
* Client only, Minimalist, Babel, ES6+, browserify

# License
[MIT](/LICENSE)
79 changes: 79 additions & 0 deletions karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
var path = require('path');
var webpackConfig = require('./webpack.config');

module.exports = function(config) {
var _config = {

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',

// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],

// list of files / patterns to load in the browser
files: [
{pattern: 'node_modules/es6-shim/es6-shim.js', watched: false},
{pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', watched: false},
{pattern: './src/app/**/*.spec.ts', watched: true, included: true}
],

// list of files to exclude
exclude: [],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./src/app/**/*.spec.ts': ['webpack', 'sourcemap']
},

webpack: webpackConfig,

webpackMiddleware: {
// webpack-dev-middleware configuration
// i. e.
noInfo: true
},

coverageReporter: {
dir: 'coverage/',
reporters: [
{type: 'text-summary'},
{type: 'html'}
]
},

webpackServer: {
noInfo: true // please don't spam the console when running in karma!
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],

// web server port
port: 9876,

// enable / disable colors in the output (reporters and logs)
colors: true,

// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,

// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,

// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS2'], // you can also use Chrome

// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
};

config.set(_config);

};
72 changes: 72 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
{
"name": "app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"clean": "rimraf node_modules doc typings && npm cache clean",
"clean-install": "npm run clean && npm install",
"clean-start": "npm run clean && npm start",
"watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
"build": "rimraf dist && webpack --webpack-build --progress --profile --colors --display-error-details --display-cached",
"server": "webpack-dev-server --inline --progress --colors --display-error-details --display-cached --port=3000",
"webdriver-update": "webdriver-manager update",
"webdriver-start": "webdriver-manager start",
"lint": "tsconfig-lint",
"e2e": "protractor",
"test": "karma start --webpack-test",
"ci": "npm run e2e && npm run test",
"docs": "typedoc --options typedoc.json src/app/app.ts",
"start": "npm run server",
"postinstall": "npm run webdriver-update"
},
"dependencies": {
"angular2": "2.0.0-beta.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"css-loader": "^0.23.0",
"ember-cli-inject-live-reload": "^1.3.0",
"es6-module-loader": "^0.17.9",
"exports-loader": "0.6.2",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.4",
"html-webpack-plugin": "^1.7.0",
"imports-loader": "^0.6.4",
"istanbul-instrumenter-loader": "^0.1.3",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^2.4.0",
"json-loader": "^0.5.3",
"karma": "0.13.15",
"karma-chrome-launcher": "^0.2.1",
"karma-coverage": "^0.5.2",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.1",
"karma-phantomjs2-launcher": "^0.4.0",
"karma-sourcemap-loader": "^0.3.6",
"karma-webpack": "1.7.0",
"node-sass": "^3.4.2",
"null-loader": "git+https://github.com/webpack/null-loader.git",
"postcss-loader": "^0.8.0",
"protractor": "^3.0.0",
"raw-loader": "0.5.1",
"rimraf": "^2.4.4",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"traceur": "0.0.95",
"ts-loader": "^0.7.2",
"tsconfig-lint": "^0.2.0",
"tslint": "^3.2.0",
"tslint-loader": "^2.1.0",
"typedoc": "^0.3.12",
"typescript": "^1.7.3",
"typings": "^0.3.1",
"url-loader": "^0.5.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.12.1"
}
}
Loading

0 comments on commit d1607e0

Please sign in to comment.