Some less-mean linting. Better test-web to run only allTests.

Better entry point ordering

@todo redux example

Removed example jade

Added missing dep

They're regex not strings.

Updated info on how to use build

Is this better or worse?

Merged in recent changes for ES6 and updated base

Added pre commit hook

Merged and working.

Angular build.

Angular update. Now with linting.

Working on fixing some base stuff

Cleaning up packages in base.

Cleaning up files. Setting better base.

Updated eslintrc

0.0.2

Resolver for linting webpack alias. Added environment module.

0.1.0

Updating readme for env

0.1.1

Only lint js files.

0.1.2

Added assets directory

No reason to be 2 lines

0.2.0

0.3.0

Moved build to a small node file. Better compile.

0.4.0

Removed specific flags

Added webpack dashboard and
> [email protected] dev /home/dante/Downloads/repos/browser-base-main
> ./node_modules/webpack-dashboard/bin/webpack-dashboard.js -p 8008 -- npm run server

�]0;webpack-dashboard��[?1049h�[?1h�=�[1;1r�[?25l�[1;1H�(B�)0�[H�[J�[?1000h�[?1002h�[?1003h�[?1005h�[?1l�>�[34h�[?25h�[H�[J�[?1000l�[?1002l�[?1003l�[?1005l�[?1049l

0.4.1

Some cool progress

Events on inputs.

Added refresher.

Playing with stuff some more

Switched to a compiled fn list to run recursive build.

Added more logs. Build breaks on local because dashboard.

Added explicit favicon. Removed wp dashboard.

Reverted to environments only.

0.4.2

0.5.0

Added docs to ignore

.babelrc

@@ -0,0 +1,4 @@
+{
+	"presets": ["es2015"],
+	"plugins": ["transform-object-rest-spread"]
+}

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.jade]
+trim_trailing_whitespace = false
+indent_style = tab
+
+[*.md]
+trim_trailing_whitespace = false
+indent_style = tab

.eslintrc.js

@@ -1,9 +1,54 @@
 'use strict';
-
 module.exports = {
-	extends: 'airbnb/base',
+	settings: {
+		'import/resolver': 'webpack',
+		'import/extensions': ['.js'],
+	},
+	extends: [
+		'airbnb/base',
+		'plugin:import/errors',
+		'plugin:import/warnings',
+	],
 	root: true,
+	parserOptions: {
+		ecmaVersion: 6,
+		ecmaFeatures: {
+			experimentalObjectRestSpread: true
+		}
+	},
 	rules: {
-		indent: [2, 'tab']
+		// 'no-undef': [1, 'always'],
+		'prefer-const': [1],
+
+		// use tabs only
+		indent: [2, 'tab', { SwitchCase: 1 }],
+
+		// use one space anywhere we allow space
+		'no-multi-spaces': [2],
+
+		// no spaces before a functions parameters.
+		// good => `function add(a, b){ ... }`
+		// bad => `function add (a, b){ ... }`
+		'space-before-function-paren': [2],
+
+		// error if we are reassigning function parameters,
+		// allow reassigning props of parameters
+		'no-param-reassign': [2, { 'props': false }],
+
+		// warn when you don't dangle a comma in a multiline object or array def
+		'comma-dangle': [1, 'always-multiline'],
+
+		// use whatever block padding you want
+		'padded-blocks': [0],
+
+		// only provide a radix to parseInt if it is not 10
+		radix: [2, 'as-needed'],
+
+		// set max line length to a more reasonable number
+		'max-len': [2, 120],
+	},
+	env: {
+		mocha: true,
+		browser: true,
 	}
 };

.gitignore

@@ -1,12 +1,22 @@
-[Build Files]
+# Build Artifacts
 bin
+docs
 
-[Generated Files]
-*.log
+# Dependencies
+node_modules
 
+# IDE
+.tmp/
+.DS_Store
+.idea/
+*.sublime-*
 
-[Dependencies]
-node_modules
+# Generated / Data files
+*.meta
+*.log
+
+# Misc
+data/
 
-[IDE]
-*.sublime-*
+# Optional REPL history
+.node_repl_history

README.md

@@ -1,10 +1,55 @@
-# browser-base
-A boilerplate to start developing for the web
+# web-base
+Use this to start other web projects. It gives you a good base to start from including
++ has an .editorconfig to enforce typographic style like tabs instead of spaces and no trailing whitespace
++ uses eslint to enforce javascript coding conventions such as no `var`s perfer arrow functions, etc
++ compiles es6 using babel and webpack (includes sourcemaps)
++ compiles jade -> html or strings (.tpl)
++ compiles sass -> css adding browser specific prefixes where necessary
 
-`npm serve` for testing
+## New projects
+First create a new repository on [github](https://github.com/new)
+```
+git clone [email protected]:jplikesbikes/web-base.git newrepos
+cd newrepos
+git remote rename origin upstream
+git remote add origin [email protected]:jplikesbikes/newrepos
+git push -u origin master
+```
+Update the package.json name and repository.
+Update the readme.
+Your good to go!
 
-`npm compile` to build
+## Develop
+```
+npm install
+npm test // run tests
+npm run linter // lint and auto fix formatting errors
 
-`npm test` for cli testing
+npm run web-test //  run tests in browser with webpack-dev-server
+open localhost:8080/test.bundle
 
-`npm test-web` to debug in the browser
+npm run server // run webpack-dev-server with hot module reloading
+open localhost:8080
+```
+
+### Environments
+The `webpack.config.js` adds an `environment` module alias to a file in the `env` directory.
+By default, it points to `env/localhost.js`, but you can point to any file in
+`env` by
+providing a `--env environmentName` command line arg:
+```
+#Compile with import env from `environment` pointing to `env/prod.js`
+npm run compiler -- --env prod
+```
+
+Watching Tests
+```
+npm test -- --watch
+```
+
+Compile into `bin` and deploy to s3
+```
+npm run compiler
+npm run aws-deploy s3://your-bucket-here
+```
+note you need the aws cli installed for deployment to work

build.js

@@ -0,0 +1,36 @@
+const wp = require('webpack');
+const merge = require('merge-dirs').default;
+const config = require('./webpack.config');
+const del = require('del');
+
+delete config.devServer;
+
+console.log('Clearing bin');
+return del(['./bin']).then(paths =>
+	new Promise((res, rej) =>
+		wp(config, (err, stats) => {
+			if (err) {
+				console.error(err);
+			}
+			if (stats) {
+				console.log(stats.toString({
+					chunks: true,
+					colors: true,
+					hash: true,
+					timings: true,
+					assets: true,
+					modules: true,
+					children: true
+				}));
+			}
+			console.log('Merging assets');
+			merge('./assets', './bin', 'ask');
+			console.log('Mergind done');
+			return res('Done.');
+		})
+	)
+).then(
+	res => console.log(res),
+	rej => console.error(rej)
+);
+

env/localhost.js

@@ -0,0 +1,7 @@
+export default {
+	// details
+	env: 'localhost',
+	version: 0,
+	// feature flags
+	logging: true,
+};

env/prod.js

@@ -0,0 +1,7 @@
+export default {
+	// details
+	env: 'prod',
+	version: 0,
+	// feature flags
+	logging: false,
+};

package.json

@@ -1,39 +1,52 @@
 {
   "name": "browser-base",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "repository": "c-dante/browser-base",
-  "main": "index.js",
   "scripts": {
-    "compile": "rm -rf ./bin && ./node_modules/webpack/bin/webpack.js",
-    "serve": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --progress",
-    "test": "./node_modules/eslint/bin/eslint.js src/ test/ && ./node_modules/mocha/bin/mocha --compilers js:babel-register test/**/*.spec.js",
-    "test-web": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js \"mocha!../test/allTests.js\" --target web --output-file test.bundle.js"
+    "compiler": "node ./build",
+    "aws-deploy": "aws s3 sync --acl public-read --delete ./bin",
+    "linter": "./node_modules/eslint/bin/eslint.js --fix src/ test/",
+    "server": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --progress",
+    "test": "./node_modules/mocha/bin/mocha --compilers js:babel-register src/**/*.spec.js",
+    "web-test": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js \"mocha!../test/allTests.js\" --target web --output-file test.bundle.js --hot --inline --progress --port 8081"
+  },
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run linter"
+    }
   },
-  "author": "c-dante",
-  "license": "MIT",
   "dependencies": {
-    "redux": "^3.0.5"
+    "normalize.css": "^4.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.3",
-    "autoprefixer-loader": "^3.1.0",
-    "babel-core": "^6.4.0",
-    "babel-loader": "^6.2.1",
-    "babel-preset-es2015": "^6.3.13",
+    "babel-core": "^6.7.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-register": "^6.7.2",
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
+    "cssnano": "^3.8.1",
     "eslint": "^2.4.0",
-    "eslint-config-airbnb": "^6.1.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-import-resolver-webpack": "^0.5.1",
+    "eslint-plugin-import": "^1.14.0",
     "file-loader": "^0.8.5",
+    "ghooks": "^1.3.2",
+    "html-loader": "^0.4.3",
     "jade": "^1.11.0",
     "jade-html-loader": "0.0.3",
-    "jade-loader": "^0.8.0",
-    "less": "^2.5.3",
-    "less-loader": "^2.2.2",
+    "merge-dirs": "^0.2.1",
+    "mocha": "^2.4.5",
+    "mocha-loader": "^0.7.1",
+    "node-sass": "^3.8.0",
     "postcss-loader": "^0.8.2",
+    "pre-commit": "^1.1.2",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^4.0.0",
     "style-loader": "^0.13.0",
-    "webpack": "^1.12.11",
+    "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1"
   },
   "engines": {

src/_variables.scss

@@ -0,0 +1,4 @@
+
+$color: #222;
+$font-size: 16px;
+

src/index.jade

@@ -1,11 +1,23 @@
 doctype html
-html(lang="en")
+html(lang='en')
 	head
-		meta(charset="UTF-8")
-		meta(name="viewport", content="width=device-width, initial-scale=1")
-		meta(name="description", content="")
-
-		title Hello World
-
-		script(src="./main.bundle.js", type="text/javascript", async, defer)
+		meta(charset='UTF-8')
+		title Demo Page
+		link(
+			rel="stylesheet"
+			type="text/css"
+			href="./index.css"
+		)
+		link(
+			rel="shortcut icon"
+			type="image/x-icon"
+			href="./favicon.ico"
+		)
 	body
+		h1.hidden.content-loading Loading...
+
+		script(
+			src="app.bundle.js",
+			async="true",
+			defer="true"
+		)

src/index.scss

@@ -0,0 +1,14 @@
+// This file is loaded with the page
+// Use it to put base styles and resets in
+
+@import "~normalize.css";
+@import "variables";
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+html {
+  font-family: 'Open Sans', sans-serif;
+  color: $color;
+	font-size: $font-size;
+}
+

src/main.js

@@ -1,11 +1,11 @@
-require('./main.less');
+import './main.scss';
+import env from 'environment';
+
+
+console.debug('Hello world', env);
+
+
+
 
-console.log('Hello World.');
 
-// Jade example
-var exampleJade = require('./example.jade');
 
-document.body.innerHTML = exampleJade({
-	name: 'Frank',
-	age: Math.floor(1 + Math.random() * 50)
-});