switch to web pack dev server for examples

reactjs · Nov 10, 2014 · 31c160d · 31c160d
1 parent 5497538
commit 31c160d
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 15 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -28,10 +28,10 @@ always be in sync.
 
 ### Development
 
-- `script/test` will fire up a karma runner and watch for changes in the
-  specs directory.
-- `npm test` will do the same but doesn't watch, just runs the tests.
-- `script/build-examples` does exactly that.
+- `npm start` runs the dev server to run/develop examples
+- `npm test` will run the test.
+- `script/test` same as `npm test` but keeps karma running and watches
+  for changes
 
 ### Build
 

diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -4,5 +4,6 @@
 <link href="app.css" rel="stylesheet"/>
 <body>
 <div id="example"></div>
-<script src="../global-bundle.js"></script>
-<script src="app-bundle.js"></script>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/basic.js"></script>
+
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "example": "examples"
   },
   "scripts": {
-    "test": "script/test --browsers Firefox --single-run"
+    "test": "script/test --browsers Firefox --single-run",
+    "start": "script/dev-examples"
   },
   "authors": [
     "Ryan Florence"
@@ -24,6 +25,7 @@
     "browserify-shim": "3.6.0",
     "envify": "1.2.0",
     "expect": "0.1.1",
+    "jsx-loader": "0.11.2",
     "karma": "0.12.16",
     "karma-browserify": "^0.2.1",
     "karma-chrome-launcher": "0.1.4",
@@ -35,7 +37,8 @@
     "react-tap-event-plugin": "git://github.com/appsforartists/react-tap-event-plugin",
     "reactify": "^0.14.0",
     "rf-release": "0.3.1",
-    "uglify-js": "2.4.15"
+    "uglify-js": "2.4.15",
+    "webpack-dev-server": "1.6.5"
   },
   "peerDependencies": {
     "react": ">=0.11.0"
@@ -55,4 +58,4 @@
   "browserify-shim": {
     "react": "global:React"
   }
-}
+}
diff --git a/script/build-examples b/script/build-examples
diff --git a/script/dev-examples b/script/dev-examples
@@ -0,0 +1,3 @@
+#!/bin/sh
+node_modules/.bin/webpack-dev-server --inline --content-base examples/
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,52 @@
+var fs = require('fs');
+var path = require('path');
+var webpack = require('webpack');
+
+var EXAMPLES_DIR = path.resolve(__dirname, 'examples');
+
+function isDirectory(dir) {
+  return fs.lstatSync(dir).isDirectory();
+}
+
+function buildEntries() {
+  return fs.readdirSync(EXAMPLES_DIR).reduce(function (entries, dir) {
+    if (dir === 'build')
+      return entries;
+
+    var isDraft = dir.charAt(0) === '_';
+
+    if (!isDraft && isDirectory(path.join(EXAMPLES_DIR, dir)))
+      entries[dir] = path.join(EXAMPLES_DIR, dir, 'app.js');
+
+    return entries;
+  }, {});
+}
+
+module.exports = {
+
+  entry: buildEntries(),
+
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    path: 'examples/__build__',
+    publicPath: '/__build__/'
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, loader: 'jsx-loader?harmony' }
+    ]
+  },
+
+  resolve: {
+    alias: {
+      'react-router': '../../modules/index'
+    }
+  },
+
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('shared.js')
+  ]
+
+};