Frontend boilerplate 💩
Javascripts
babel (preset-es2015)
eslint (babel-parser)
typescript
tslint
ng-annotate
Usage example:
import {helper} from './utils';
Styles
stylus
stylint
Usage example:
import './reset.styl;
Templates
jade-html-loader
ng-cache-loader
Importing in JS:
import template from './tpl.pug';
angular.component('foo', {template});
Importing in DOM:
import './dir1/dir2/dir3/dir4/tpl.pug';
div(ng-include="'tpl/dir3/dir4/tpl.pug'")
Static pages
pug-loader
Add new plugin to webpack config:
new HtmlPlugin({
filename: '404.html',
template: 'pages/error.pug'
})
Assets
url-loader
file-loader
Usage in JS:
import img from 'assets/logo.png';
Usage in styles:
.header-logo
background: url('~/assets/logo.png')
Usage in templates:
img(src="assets/logo.png")
Usage in static pages:
img(src=require("assets/logo.png"))
Unit tests
karma
jasmine
test/unit/index.js
test/unit/**/*.js
src/**/*.spec.js
E2E tests
protractor
jasmine
test/e2e/index.js
test/e2e/**/*.js
src/**/*.e2e.js
Coverage
istanbul
Add your own settings to coverage:check
script in package.json
istanbul check-coverage --statements 100 --branches 75 --functions 75 --lines 75
Reports
localhost:9000/report/unit
localhost:9000/report/coverage
Servers
Simple express SPA server
npm run serve
Livereload proxy-server (browser-sync)
npm run serve:dev
API mocks server (json-server)
npm run serve:mocks
Selenium server for protractor
npm run serve:webdriver
Development workflow
Incremental build + unit tests
npm run build:dev
npm run test:unit:dev
E2E tests
npm run test:e2e
Production workflow
npm run validate
npm run build
npm run test
Environment
Create local version of .env file
mv .env.example .env
For provide some env variables to client build via EnvironmentPlugin,
add variables names to config/build.js
CLIENT_ENV_VARS: ['API_ENDPOINT', 'API_TOKEN']
and values to .env
file:
API_ENDPOINT=https://api.site.com
API_TOKEN=secret
TODO
- e2e watch mode
- e2e in travis
- e2e in Sauce Labs
- source-maps for units
- documentation
Webpack 2
- HMR (
webpack-dev-server@2.1.0-beta.0
) -
babel-preset-es2015-webpack
adds tree shaking features, but doesn't works withng-annotate
. - source-maps in production/unit/e2e with (
webpack@2.1.0-beta.15
) -
SystemJS
-
LoaderOptionsPlugin