Adde new development build workflow

Author: piotrwitek

.gitignore

@@ -28,6 +28,9 @@ src/**/*.map
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
 jspm_packages
-typings
+
+# Build directory
 dist/*bundle.js*
+dist/jspm.config.js
+dist/system.js
 out

README.md

@@ -1,4 +1,4 @@
-# React / TypeScript / JSPM / Hot-Reload - starter-kit 
+# React / TypeScript / JSPM / Hot-Reload - starter-kit
 > Modern & Minimalistic boilerplate for building modular apps with React - utilizing power of TypeScript, ES2016, Hot-Reload, async/await, ES Modules & in-browser transpiling powered by JSPM/SystemJS.
 
 > Keeping up-to-date with new releases of React / TypeScript / JSPM, and to follow changes in the best practices as they might change with a new updates.
@@ -14,7 +14,7 @@
 - COMPLETE-WORKFLOW - helpful npm scripts and tasks, github hooks, linter, test-harness etc.
 - TDD-READY - test-harness setup with Tape (blue-tape) - included example code and @types
 - EXTRAS - css only loader while waiting for React to "kick in"
- 
+
 ##### Learn TypeScript from sample code
 - Typescript definitions for third-party libraries
 - solid tsconfig setup for ES2016 support
@@ -47,53 +47,55 @@ My test procedure:
 
 ---
 
-## Usage
+## Installation
 
-#### NPM Commands
+#### Prerequisites
+- Node.js and Git
+- Install JSPM with global flag to have jspm command available: `npm install jspm -g` (otherwise you'll have to use a local version from `~/node_modules/`)
 
-`npm start` - start local dev server with hot-module-reload for JSPM [jspm-hmr](https://www.npmjs.com/package/jspm-hmr)
 
-`npm run bundle-dev` - inject static dev-bundle to JSPM config for quick full-page reload
+#### 1. Clone repo
+    git clone https://github.com/piotrwitek/react-ts-jspm-starter-kit.git my-project-folder
 
-`npm run unbundle` - un-inject static dev-bundle from JSPM config
+#### 2. Install npm dependencies
+    npm install
 
-`npm run build` - build production app bundle (only your app source) - optimized minified version w/o source-maps (dist/ folder)
+#### 3. Run development server with HMR and enjoy best possible dev feedback-loop
+    npm start
 
-`npm run build-debug` - same as build but debug version with source-maps
+---
 
-`npm run build-deps` - build production dependency bundle (only external dependencies) (dist/ folder)
+## Usage
 
 #### Dev Workflow
 1. `npm run bundle-dev` - _**OPTIONAL:** run only when your dependencies has changed_
 2. `npm start`
 
-#### Build for Production Workflow (WIP -> in next release)
+#### Build for Production Workflow
 1. `npm run build`
 2. `npm run build-deps` - _**OPTIONAL:** run only when your dependencies has changed_
 3. open `http://localhost/dist/` to check
 4. deploy 'dist' contents on your server
 
----
+#### Npm Commands
 
-## Installation
+`npm start` - start local dev server with hot-module-reload for JSPM [jspm-hmr](https://www.npmjs.com/package/jspm-hmr)
 
-#### Prerequisites
-- Node.js and Git
-- Install JSPM with global flag to have jspm command available: `npm install jspm -g` (otherwise you'll have to use a local version from `~/node_modules/`)
+##### Development Bundling
 
+`npm run bundle-dev` - bundle static dependencies for quick full-page reload, app sources remain as seperate modules for on-the-fly HMR & transpilation
 
-#### 1. Create new project folder
-    mkdir my-project && cd my-project
+`npm run unbundle` - un-bundle static dependencies (usefull when changing app dependencies)
 
-#### 2. Clone repo
-    git clone https://github.com/piotrwitek/react-ts-jspm-starter-kit.git .
+##### Production Bundling (`dist/` folder)
 
-#### 3. Install npm dependencies
-    npm install
+`npm run build` - build app bundle (only your app source) - minified, no source-maps
 
-#### 4. Run development server and start developing
-    npm start
+`npm run build-deps` - build dependency bundle (only external dependencies) - minified, no source-maps
+
+`npm run build-all` - build both app & dependecy bundle
 
+`npm run build-debug` - build app bundle - debug version with source-maps
 
 ---
 

dist/index.html

@@ -27,6 +27,7 @@
   </div>
   <!-- body bottom scripts -->
   <script src="system.js"></script>
+  <script src="jspm.config.js"></script>
   <script type="text/javascript">
     // load main module of your app
     System.production = true;

dist/system.js

@@ -14,13 +14,14 @@
     "prepush": "npm run lint && npm test",
     "bundle-dev": "jspm bundle dev-bundle.config.js out/dev-bundle.js -id",
     "unbundle": "jspm unbundle",
-    "bundle-deps": "jspm bundle react + react-dom dist/deps-bundle.js --minify --skip-source-maps",
+    "bundle-deps": "jspm unbundle && jspm bundle react + react-dom deps-bundle.js --minify --skip-source-maps -i && cp jspm.config.js dist/ && cp jspm_packages/system.js dist/ && mv deps-bundle.js dist/ && jspm unbundle",
     "bundle-app": "jspm build src/app - react - react-dom - plugin-typescript dist/app-bundle.js --minify --skip-source-maps",
     "bundle-app-debug": "jspm build src/app - react - react-dom - plugin-typescript dist/app-bundle.js",
     "build": "npm run bundle-app && npm run regenerator",
+    "build-all": "npm run build-deps && npm run build",
     "build-debug": "npm run bundle-app-debug",
-    "build-deps": "npm run unbundle && cp jspm_packages/system.js dist/ && cp jspm.config.js dist/ && npm run bundle-deps && npm run bundle-dev",
-    "regenerator": "cd out && cp ../dist/app-bundle.js . && regenerator -r app-bundle.js > app-bundle.regenerator.js && cp app-bundle.regenerator.js ../dist/app-bundle.js",
+    "build-deps": "npm run bundle-deps && npm run bundle-dev",
+    "regenerator": "cd out && cp ../dist/app-bundle.js . && regenerator -r app-bundle.js > app-bundle.regenerator.js && cp app-bundle.regenerator.js ../dist/app-bundle.js ",
     "init-deploy": "mkdir dist && git clone https://github.com/piotrwitek/react-ts-jspm-starter-kit --branch gh-pages dist",
     "deploy": "cd dist && git checkout gh-pages && git add --all && git commit -m \"New Release\" && git push",
     "bd": "npm run build && npm run deploy",