lekaving/febp

Frontend boilerplate

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 ([email protected])
• babel-preset-es2015-webpack adds tree shaking features, but doesn't works with ng-annotate.
• source-maps in production/unit/e2e with ([email protected])
• SystemJS
• LoaderOptionsPlugin