Skip to content

jimee02/angular2-webpack-boilerplate

 
 

Repository files navigation

An opinionated Angular 2 + Webpack boilerplate

Work in progress. This kit is not created for learning purposes, but rather as a base for my own upcoming projects. I'm not sure that world needs yet another Angular 2 + webpack boilerplate, but initially it was shared as a solution for TypeScript code coverage issue.

Feel free to create issues and PRs, though, if you know how to do this thing better.

What's inside

Angular 2 example application (examples for components, HTTP, forms, routing are yet to come - most likely when Angular 2 is out of RC state).

Templates and stylesheets are embedded into JS bundle. I chose SASS for styling.

index.html is generated using html-webpack-plugin. Some popular analytics/metrics are yet to be added there (e.g. Google Analytics or New Relic).

Hot module replacement is not provided here. Possibly I'll add it later. Same goes for service workers.

Installation

Clone repository and run npm install.

Run npm start and point your browser to http://localhost:9045/.

Testing

Use npm test to run test suite. Karma is used as test runner, Jasmine - as testing framework. Code coverage reports are generated using istanbul and remap-istanbul (this provides possibility to map back to TypeScript).

Use npm lint to check TypeScript files (via tslint) and SASS stylesheets (via sass-lint). Codelyzer helps to keep code close to Angular 2 Style Guide.

You won't find end-to-end tests in this project (usually people use Protractor for this purpose). I believe that E2E/QA testing should be written in a separate project/repository, especially if you are working on projects with microservice architecture.

Building bundle(s)

Use npm run build and you will get JS bundles, their maps and index.html in dist directory. To build for production, use NODE_ENV=production npm run build (webpack configuration is chosen according to this environment variable).

Documentation

Run npm run docs to generate documentation for TypeScript (typedoc is used for that) and SASS stylesheets (done with kss-node). This might seem a little bit unusual to have docs for styles, but I find KSS very nice tool to keep them understandable.

Notes for development

Modules are resolved not only from node_modules directory, but from src as well. This is done to keep imports simple and avoid situations like import { MyService } from '../../../app.service'.

If you are using JetBrains IDE, mark src directory as resource root.

About

A boilerplate for Angular 2 and Webpack

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 68.4%
  • TypeScript 25.9%
  • HTML 4.0%
  • CSS 1.7%