Micro UI project starter, built on top of my micro JS project starter. Quickly get up and running with a decent browser app setup -- a scratchpad of sorts -- with pre-wired unit testing, a JS module system, linting, ES6, SCSS compilation, and autoprefixer.

Assumes npm for package management; uses webpack to bundle and serve, mocha for tests, eslint to lint, and babel to compile to JS anything you can throw at babel (e.g. ES6, JSX). Swapping out parts is easy too.

Note: to facilitate easy/rapid development this leverages webpack's CSS bundling -- the CSS is inlined in the JS bundle, then injected as a stylesheet into the DOM -- IDK about you but I wouldn't use that in a real project! #tradeoffs

git clone https://github.com/stuartsan/ui-starter $WHATEVER
cd $WHATEVER

Optionally wipe out this starter project's history and initialize a new repo:

rm -rf .git/ && git init

Then grab stuff:

npm install

And do stuff:

npm test: run unit tests once

npm run test-watch: run unit tests once, watches files, runs on change

npm run lint: run eslint

npm run bundle: bundle JS/CSS for browser, output goes to public/bundle.js.

npm run serve: (best command)
Fire up a webpack-dev-server that serves the HTML index page, watches source files, recompiles everything on change in memory, not on disk, FYI, and hot reloads the updated assets into the browser.
Run this then navigate your browser to localhost:8080. Now make some changes to either the JS or styles (say, add an alert('derp'); to src/index.js and notice the automatic rebuilding and reloading. Cool.

Run npm run serve along with npm run test-watch and you're TDDing, stuff is interactive, stuff is agile.