Update Toolkit to v4, switching to webpack

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

.eslintrc

@@ -28,22 +28,39 @@
         // Ignore React because it's needed before ReactDOM
         "varsIgnorePattern": "React"
       }
-    ]
+    ],
+
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
   },
   "env": {
     "es6": true,
     "browser": true,
     "node": true
   },
-  "extends": "eslint:recommended",
   "ecmaFeatures": {
     "jsx": true,
     "modules": true,
     "experimentalObjectRestSpread": false
   },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true,
+      "experimentalObjectRestSpread": false
+    },
+  },
+
   "plugins": [
     "react"
   ],
+  "extends": ["eslint:recommended"],
+
   // Custom Globals
   "globals": {
     "app": true,

.gitignore

@@ -1,231 +1,12 @@
-## Sublime Text
-*.sublime-project
-*.sublime-workspace
-
-#################
-## Eclipse
-#################
-
-*.pydevproject
-.project
-.metadata
-bin/
-tmp/
-*.tmp
-*.bak
-*.swp
-*~.nib
-local.properties
-.classpath
-.settings/
-.loadpath
-
-# External tool builders
-.externalToolBuilders/
-
-# Locally stored "Eclipse launch configurations"
-*.launch
-
-# CDT-specific
-.cproject
-
-# PDT-specific
-.buildpath
-
-
-#################
-## Visual Studio
-#################
-
-## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
-
-# User-specific files
-*.suo
-*.user
-*.sln.docstates
-
-# Build results
-
-[Dd]ebug/
-[Rr]elease/
-x64/
-[Bb]in/
-[Oo]bj/
-
-# MSTest test Results
-[Tt]est[Rr]esult*/
-[Bb]uild[Ll]og.*
-
-*_i.c
-*_p.c
-*.ilk
-*.meta
-*.obj
-*.pch
-*.pdb
-*.pgc
-*.pgd
-*.rsp
-*.sbr
-*.tlb
-*.tli
-*.tlh
-*.tmp
-*.tmp_proj
-*.log
-*.vspscc
-*.vssscc
-.builds
-*.pidb
-*.log
-*.scc
-
-# Visual C++ cache files
-ipch/
-*.aps
-*.ncb
-*.opensdf
-*.sdf
-*.cachefile
-
-# Visual Studio profiler
-*.psess
-*.vsp
-*.vspx
-
-# Guidance Automation Toolkit
-*.gpState
-
-# ReSharper is a .NET coding add-in
-_ReSharper*/
-*.[Rr]e[Ss]harper
-
-# TeamCity is a build add-in
-_TeamCity*
-
-# DotCover is a Code Coverage Tool
-*.dotCover
-
-# NCrunch
-*.ncrunch*
-.*crunch*.local.xml
-
-# Installshield output folder
-[Ee]xpress/
-
-# DocProject is a documentation generator add-in
-DocProject/buildhelp/
-DocProject/Help/*.HxT
-DocProject/Help/*.HxC
-DocProject/Help/*.hhc
-DocProject/Help/*.hhk
-DocProject/Help/*.hhp
-DocProject/Help/Html2
-DocProject/Help/html
-
-# Click-Once directory
-publish/
-
-# Publish Web Output
-*.Publish.xml
-*.pubxml
-
-# NuGet Packages Directory
-## TODO: If you have NuGet Package Restore enabled, uncomment the next line
-#packages/
-
-# Windows Azure Build Output
-csx
-*.build.csdef
-
-# Windows Store app package directory
-AppPackages/
-
-# Others
-sql/
-*.Cache
-ClientBin/
-[Ss]tyle[Cc]op.*
-~$*
-*~
-*.dbmdl
-*.[Pp]ublish.xml
-*.pfx
-*.publishsettings
-
-# RIA/Silverlight projects
-Generated_Code/
-
-# Backup & report files from converting an old project file to a newer
-# Visual Studio version. Backup files are not needed, because we have git ;-)
-_UpgradeReport_Files/
-Backup*/
-UpgradeLog*.XML
-UpgradeLog*.htm
-
-# SQL Server files
-App_Data/*.mdf
-App_Data/*.ldf
-
-#############
-## Windows detritus
-#############
-
-# Windows image file caches
-Thumbs.db
-ehthumbs.db
-
-# Folder config file
-Desktop.ini
-
-# Recycle Bin used on file shares
-$RECYCLE.BIN/
-
-# Mac crap
-.DS_Store
-
-
-#############
-## Python
-#############
-
-*.py[co]
-
-# Packages
-*.egg
-*.egg-info
-dist/
-eggs/
-parts/
-var/
-sdist/
-develop-eggs/
-.installed.cfg
-
-# Installer logs
-pip-log.txt
-
-# Unit test / coverage reports
-.coverage
-.tox
-
-#Translations
-*.mo
-
-#Mr Developer
-.mr.developer.cfg
-
-
-
 #############
 ## Node
 #############
 
 node_modules/
+npm-debug.log
 
 #############
-## Generated Public Files
+## Generated Build Files
 #############
 
-public/
+build/

Readme.md

@@ -1,18 +1,36 @@
-stk-toolkit
-=============
+<h1 align="center">:star2: universal-dev-toolkit :star2:</h1>
+<p align="center"><sub>Javascript Development Toolkit by <a href="https://twitter.com/stoikerty">@stoikerty</a>, kindly supported by <a href="https://raw.githubusercontent.com/stoikerty/universal-dev-toolkit/master/browserstack-logo.png"><img src="https://raw.githubusercontent.com/stoikerty/universal-dev-toolkit/master/browserstack-logo.png" alt="BrowserStack-Image" style="max-width:100%;"></a> <a href="https://www.browserstack.com">BrowserStack</a>.</sub></p>
 
-Install Node : [Node Platform](https://nodejs.org/)<br>
-**Start Server** : `npm run server`<br>
-**Start Asset Watcher** : `npm run watch`<br>
-*( `npm run build` builds files for production but needs personalised code-changes within gulp config & tasks )*
+### How to Use <sub>/ Getting started quickly</sub>
+- Install Node : [Node Platform](https://nodejs.org/) <sub>*(I'm using v5.6.0 but v4.2 LTS should work too)*</sub><br>
+- **Install the dependencies via npm** : `npm install`<br>
+- **Start Server with Asset Watcher** : `npm run dev`<br>
 
-Now you should be ready to go to start building your project.
+You should now be ready to start building your project. If it doesn't work, feel free to [report an issue or help somebody out](https://github.com/stoikerty/universal-dev-toolkit/issues).
 
----
-If you are looking for a resource to learn from, have a look at the **Human JavaScript** video course titled ["Build an App with React and Ampersand"](http://learn.humanjavascript.com/react-ampersand) or read the ["Human JavaScript Book"](http://read.humanjavascript.com/) by [@HenrikJoreteg](twitter.com/henrikjoreteg)
+:point_right:  Your source-files will be **hot-reloaded** and proxied via `http://localhost:3000`.
+
+*You will be working with [Universal Javascript](https://medium.com/@mjackson/universal-javascript-4761051b7ae9#.llvvuk4l5), managed via [webpack](https://webpack.github.io/), therefore your source-code located in `src` will be divided into 2 directories, `client` and `server`. The `layout.html` is located in `src\server\views`*.
+
+I use [Express](http://expressjs.com/) with [React-Router](https://github.com/reactjs/react-router), [React](https://facebook.github.io/react/) and [SCSS](http://sass-lang.com/) with [Autoprefixer](https://github.com/postcss/autoprefixer) to build my projects. There are a few customisations although I kept the files to a minimum to allow for exploration and you being able to change things to your liking.
+<br><br>
 
 ---
-:point_right: A Server is fired on `localhost:2000`, while the watch-runner proxies it through [BrowserSync](http://www.browsersync.io/) on `localhost:3000` (default). BrowserSync will reload on file-changes and synchronise scrolling etc. on any browsers connected to `http://localhost:3000`.
+
+##### Creating a Build <sub>/ How webpack is configured</sub>
+- Build production files for transferring to Server with `npm run build`. The server runs on port `2000`.
+- Lint your files using [eslint](http://eslint.org/) with `npm run lint`.
+
+Have a look at the `package.json` for a full list of dependencies. The webpack folder contains a **`webpack/config.js`** that is used both for running **`webpack/development.js`** <sub>(via `npm run dev`)</sub> and **`webpack/production.js`** <sub>(via `npm run build`)</sub>.
+
+##### Decisions :foggy:
+
+I opted to use [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) and [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) for adding hot-reload functionality via a server that you can customize separately in the `src`-folder. The state of React-components is not kept as I'm looking to work with Redux, I got the idea to stop using unsafe transforms from and reduce the complexity of Babel Transforms via [an Article I read "Hot Reloading in React - *or, an Ode to Accidental Complexity*"](https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.3mce9tv45) and the resulting discussion in [a Redux pull-request](https://github.com/reactjs/redux/pull/1455).
+
+CSS is imported via [css-modules](https://github.com/css-modules/css-modules). If you have never heard about css-modules, read ["CSS Modules - *Welcome to the Future*"](http://glenmaddern.com/articles/css-modules).
+
+Currently there is no test-suite. I might add one if I get more exposure into using tests myself. Although I do like keeping the toolkit simple and extensible instead of adding all sorts of dependencies for the sake of having more features. Feel free to add your own if you need it.
 
 ---
-kindly supported by ![BrowserStack-Image](https://raw.githubusercontent.com/stoikerty/stk-toolkit/master/browserstack-logo.png) [BrowserStack](https://www.browserstack.com)
+
+*For more information, see [the release PR](https://github.com/stoikerty/universal-dev-toolkit/pull/1).*