simplifying webpack example to just use the express server

nfriedly · nfriedly · commit 0ff9adabe243 · 2017-02-08T13:46:07.000-05:00
diff --git a/examples/package.json b/examples/package.json
@@ -3,9 +3,7 @@
   "version": "1.0.0",
   "description": "Examples showing the IBM Watson Speech Javascript SDK in action.",
   "scripts": {
-    "start": "npm run build-webpack && npm run server",
-    "server": "node server.js",
-    "build-webpack": "webpack"
+    "start": "node server.js"
   },
   "dependencies": {
     "defaults": "^1.0.3",
@@ -16,10 +14,9 @@
     "vcap_services": "^0.1.7",
     "watson-developer-cloud": "^1.2.0",
     "watson-speech": "*",
+    "webpack": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
     "whatwg-fetch": "^1.0.0"
   },
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "webpack": "^2.2.1"
-  }
+  "license": "Apache-2.0"
 }
diff --git a/examples/server.js b/examples/server.js
@@ -25,7 +25,7 @@ require('dotenv').load({silent: true});
 
 app.use(express.static(__dirname + '/static'));
 
-// set up express-browserify to serve bundles for examples
+// set up express-browserify to serve browserify bundles for examples
 var isDev = app.get('env') === 'development';
 app.get('/browserify-bundle.js', expressBrowserify('static/browserify-app.js', {
   watch: isDev,
@@ -36,7 +36,19 @@ app.get('/audio-video-deprecated/bundle.js', expressBrowserify('static/audio-vid
   debug: isDev
 }));
 
-// webpack bundle is built by running `npm run build-webpack` or `npm start`
+
+// set up webpack-dev-middleware to serve Webpack bundles for examples
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var webpack = require('webpack');
+var webpackConfig = require('./webpack.config');
+
+var compiler = webpack(webpackConfig);
+
+app.use(webpackDevMiddleware(compiler, {
+  publicPath: '/' // Same as `output.publicPath` in most cases.
+}));
+
+
 
 // token endpoints
 // **Warning**: these endpoints should be guarded with additional authentication & authorization for production use
diff --git a/examples/static/browserify.html b/examples/static/browserify.html
@@ -7,7 +7,7 @@
 <body>
 
 <section>
-  <h2>Transcribe from Microphone</h2>
+  <h2>Transcribe from Microphone via Browserify bundle</h2>
   <button id="button">Start Microphone Transcription</button>
 
   <h2>Output:</h2>
@@ -17,8 +17,8 @@ <h2>Output:</h2>
 <script src="browserify-bundle.js"></script>
 
 <h2>Code for this demo:</h2>
-<p>Note: this code is compiled into <a href="browserify-bundle.js"><code>browserify-bundle.js</code></a> by <code>express-browserify</code>.
-  This requires Node.js.</p>
+<p>Note: this code is compiled into <a href="browserify-bundle.js"><code>browserify-bundle.js</code></a> by
+  <code>express-browserify</code>. See <code>server.js</code>.</p>
 
 <pre><code><embed type="text/plain" src="browserify-app.js" width="100%" height="600"></embed></code></pre>
 
diff --git a/examples/static/webpack.html b/examples/static/webpack.html
@@ -7,7 +7,7 @@
 <body>
 
 <section>
-  <h2>Transcribe from Microphone</h2>
+  <h2>Transcribe from Microphone via Webpack bundle</h2>
   <button id="button">Start Microphone Transcription</button>
 
   <h2>Output:</h2>
@@ -17,9 +17,8 @@ <h2>Output:</h2>
 <script src="webpack-bundle.js"></script>
 
 <h2>Code for this demo:</h2>
-<p>Note: this code is compiled into <a href="webpack-bundle.js"><code>webpack-bundle.js</code></a> by running either
-  <code>npm run build-webpack</code> or <code>npm start</code>.
-  This requires Node.js.</p>
+<p>Note: this code is compiled into <a href="webpack-bundle.js"><code>webpack-bundle.js</code></a> by
+  <code>webpack</code> and <code>webpack-dev-middleware</code>. See <code>server.js</code>.</p>
 
 <pre><code><embed type="text/plain" src="webpack-app.js" width="100%" height="600"></embed></code></pre>
 
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -3,6 +3,7 @@
 module.exports = {
   entry: './static/webpack-app.js',
   output: {
-    filename: './static/webpack-bundle.js'
+    path: __dirname + '/static',
+    filename: 'webpack-bundle.js'
   }
 };

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`module.exports = {`
`4`	`4`	`entry: './static/webpack-app.js',`
`5`	`5`	`output: {`
`6`		`- filename: './static/webpack-bundle.js'`
	`6`	`+ path: __dirname + '/static',`
	`7`	`+ filename: 'webpack-bundle.js'`
`7`	`8`	`}`
`8`	`9`	`};`