Update Examples And Add Hotness (#1183)

* adding common style to examples * giving the examples that new hotness * reorg examples based on exec type continuing restyle implement npm script method to run examples * moving / updating more examples fixed the root path of bundle.js in layout removed baddie console logs * continuing examples upgrade * wraping up examples update * fix up the cli tests since the examples path changed
webpack · Nov 14, 2017 · b10c9eb · b10c9eb
1 parent 2e501c8
commit b10c9eb
Show file tree

Hide file tree

Showing 204 changed files with 1,567 additions and 1,029 deletions.
diff --git a/examples/.assets/favicon.ico b/examples/.assets/favicon.ico
diff --git a/examples/.assets/geomanist-medium.woff b/examples/.assets/geomanist-medium.woff
diff --git a/examples/.assets/geomanist-medium.woff2 b/examples/.assets/geomanist-medium.woff2
diff --git a/examples/.assets/icon-square.svg b/examples/.assets/icon-square.svg
diff --git a/examples/.assets/layout.html b/examples/.assets/layout.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <title>WDS ▻ <%= htmlWebpackPlugin.options.title %></title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="/.assets/favicon.ico"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,500,600"/>
+    <link rel="stylesheet" href="/.assets/style.css"/>
+  </head>
+	<body>
+    <main>
+      <header>
+        <h1>
+          <img src="/.assets/icon-square.svg" style="width: 35px; height: 35px;"/>
+          webpack-dev-server
+        </h1>
+      </header>
+      <section>
+        <h2><%= htmlWebpackPlugin.options.title %></h2>
+        <div id="target"></div>
+      </section>
+    </main>
+		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+	</body>
+</html>
diff --git a/examples/.assets/style.css b/examples/.assets/style.css
@@ -0,0 +1,104 @@
+@font-face {
+  font-family: 'Geomanist';
+  font-style: normal;
+  font-weight: 600;
+  src: url('assets/geomanist-medium.woff2') format('woff2'),
+       url('assets/geomanist-medium.woff') format('woff');
+}
+
+html,
+body {
+  background-color: #f3f3f3;
+  color: #2B3A42;
+  font: 400 10px "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  height: 100%;
+  margin: 0;
+	padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: #2086d7;
+  text-decoration: none;
+  transition: color 250ms;
+}
+
+a:hover {
+  color: #1a6aab;
+}
+
+main {
+    width: 100%;
+    max-width: 94.2rem;
+    margin: 0px auto;
+    padding: 8rem 2.4rem;
+}
+
+h1 {
+  font-size: 3.4rem;
+  font-weight: 600;
+  line-height: 3.4rem;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+h1 img {
+  height: 3.4rem;
+  width: 3.4rem;
+  vertical-align: middle;
+}
+
+h2 {
+  font-size: 2.8rem;
+}
+
+section {
+  padding: 0 0 0 4.2rem;
+}
+
+div, p, table {
+  font-size: 1.6rem;
+}
+
+code {
+  background-color: rgba(70, 94, 105, 0.06);
+  border-radius: 3px;
+  font-family: "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 1.44rem;
+  margin: 0;
+  max-width: 100%;
+  line-height: initial;
+  overflow: auto;
+  padding: 2px 6px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
+  vertical-align: middle;
+  white-space: normal;
+}
+
+#target {
+  background: #DCF2FD;
+  border: 0.1rem solid #618ca0;
+  border-radius: 0.3rem;
+  color: #618ca0;
+  margin: 2rem 0;
+  padding: 2rem;
+}
+
+#target.warn {
+  background: #fcf8e3;
+  border: 0.1rem solid #8a6d3b;
+  color: #8a6d3b;
+}
+
+#target.pass {
+  background: #f2f9f4;
+  border: 0.1rem solid #4db277;
+  color: #4db277;
+}
+
+#target.fail {
+  background: #f2dede;
+  border: 0.1rem solid #a94442;
+  color: #a94442;
+}
diff --git a/examples/README.md b/examples/README.md
@@ -1,9 +1,29 @@
 # Examples
 
-Each example showcases a feature. You can use this to learn how to use that feature, but also use it to test if something still works when making a Pull Request.
+Each example showcases a particular feature of `webpack-dev-server`. You can use
+these examples to learn how to use certain features, or as a means to test features
+when working on a Pull Request.
 
-An example should be as minimal as possible, and consists of:
+An example should be as minimal as possible and consists of at least:
 
-- The code that is necessary
-- Instructions on how to run
-- A description of what should happen
+- An `app.js` file - the entry point for an example app.
+- A `README.md` file containing information about, and how to run the example app.
+- A description of what should happen when running the example.
+- A `wepack.config.js` file containing the `webpack` configuration for the example app.
+
+## API versus CLI
+
+API examples can be found in the `api` directory. These examples demonstrate how
+to access and run `webpack-dev-server` directly in your application / script.
+
+CLI exampes can be found in the `cli` directory. These examples demonstrate how
+to run `webpack-dev-server` from the command line in your console / terminal.
+
+## Notes
+
+- Each example's `webpack` config is wrapped with `util.setup`; a helper function
+that adds plugins and configuration needed by each example to render in a consistent
+and visually pleasing way.
+- Examples' `bundle.js` and `index.html` files are compiled and served from memory.
+You won't actually see these files written to disk, but if you examine the `webpack`
+output, you should see their file indicators.
diff --git a/examples/api/middleware/README.md b/examples/api/middleware/README.md
@@ -0,0 +1,20 @@
+# API: Custom Middleware
+
+While it's recommended to run `webpack-dev-server` via the CLI, you may also
+choose to start a server via the API. This example demonstrates using one of the
+few custom middleware options; `before`.
+
+```console
+node server.js
+```
+
+## What Should Happen
+
+1. Open `http://localhost:8080/` in your preferred browser.
+2. You should see the text on the page itself change to read `Success!`.
+3. In the console/terminal, you should see the following for each refresh in
+the browser:
+```
+Using middleware for /
+Using middleware for /bundle.js
+```
diff --git a/examples/api/middleware/app.js b/examples/api/middleware/app.js
@@ -0,0 +1,6 @@
+'use strict';
+
+const target = document.querySelector('#target');
+
+target.classList.add('pass');
+target.innerHTML = 'Success!';
diff --git a/examples/node-api-middleware/server.js → examples/api/middleware/server.js b/examples/node-api-middleware/server.js → examples/api/middleware/server.js
@@ -1,11 +1,11 @@
 'use strict';
 
 const Webpack = require('webpack');
-const WebpackDevServer = require('../../lib/Server');
+const WebpackDevServer = require('../../../lib/Server');
 const webpackConfig = require('./webpack.config');
 
 const compiler = Webpack(webpackConfig);
-const server = new WebpackDevServer(compiler, {
+const devServerOptions = Object.assign({}, webpackConfig.devServer, {
   stats: {
     colors: true
   },
@@ -16,6 +16,7 @@ const server = new WebpackDevServer(compiler, {
     });
   }
 });
+const server = new WebpackDevServer(compiler, devServerOptions);
 
 server.listen(8080, '127.0.0.1', () => {
   console.log('Starting server on http://localhost:8080');

diff --git a/examples/api/middleware/webpack.config.js b/examples/api/middleware/webpack.config.js
@@ -0,0 +1,13 @@
+'use strict';
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require('../../util');
+
+module.exports = setup({
+  context: __dirname,
+  entry: ['./app.js', '../../client/index.js?http://localhost:8080/'],
+  output: {
+    filename: 'bundle.js'
+  }
+});
diff --git a/examples/api/simple/README.md b/examples/api/simple/README.md
@@ -0,0 +1,17 @@
+# API: Simple Server
+
+While it's recommended to run `webpack-dev-server` via the CLI, you may also
+choose to start a server via the API. This example starts a simple server setup.
+
+```console
+node server.js
+```
+
+## What should happen
+
+1. Open `http://localhost:8080/` in your preferred browser.
+2. You should see the text on the page itself change to read `Success!`.
+3. In `app.js`, uncomment the code that results in an error and save. This error
+should be visible in the console/terminal and in browser devtools.
+4. In `app.js`, uncomment the code that results in a warning. This warning should
+be visible in the console/terminal and in browser devtools.
diff --git a/examples/node-api-middleware/app.js → examples/api/simple/app.js b/examples/node-api-middleware/app.js → examples/api/simple/app.js
@@ -1,6 +1,9 @@
 'use strict';
 
-document.write("It's working.");
+const target = document.querySelector('#target');
+
+target.classList.add('pass');
+target.innerHTML = 'Success!';
 
 // This results in a warning:
 if (!window) {
@@ -9,4 +12,6 @@ if (!window) {
 }
 
 // This results in an error:
-// if(!window) require("test");
+// if(!window) {
+//   require("test");
+// }
diff --git a/examples/node-api-simple/server.js → examples/api/simple/server.js b/examples/node-api-simple/server.js → examples/api/simple/server.js
@@ -1,15 +1,16 @@
 'use strict';
 
 const Webpack = require('webpack');
-const WebpackDevServer = require('../../lib/Server');
+const WebpackDevServer = require('../../../lib/Server');
 const webpackConfig = require('./webpack.config');
 
 const compiler = Webpack(webpackConfig);
-const server = new WebpackDevServer(compiler, {
+const devServerOptions = Object.assign({}, webpackConfig.devServer, {
   stats: {
     colors: true
   }
 });
+const server = new WebpackDevServer(compiler, devServerOptions);
 
 server.listen(8080, '127.0.0.1', () => {
   console.log('Starting server on http://localhost:8080');

diff --git a/examples/api/simple/webpack.config.js b/examples/api/simple/webpack.config.js
@@ -0,0 +1,13 @@
+'use strict';
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require('../../util');
+
+module.exports = setup({
+  context: __dirname,
+  entry: ['./app.js', '../../../client/index.js?http://localhost:8080/'],
+  output: {
+    filename: 'bundle.js'
+  }
+});
diff --git a/examples/bonjour/README.md b/examples/bonjour/README.md
diff --git a/examples/bonjour/app.js b/examples/bonjour/app.js
diff --git a/examples/bonjour/index.html b/examples/bonjour/index.html
diff --git a/examples/cli-open-page/README.md b/examples/cli-open-page/README.md
diff --git a/examples/cli-open-page/app.js b/examples/cli-open-page/app.js
diff --git a/examples/cli-open-page/example.html b/examples/cli-open-page/example.html
diff --git a/examples/cli-open-page/webpack.config.js b/examples/cli-open-page/webpack.config.js
diff --git a/examples/cli-public-protocol/README.md b/examples/cli-public-protocol/README.md
diff --git a/examples/cli-public-protocol/app.js b/examples/cli-public-protocol/app.js
diff --git a/examples/cli-public-protocol/webpack.config.js b/examples/cli-public-protocol/webpack.config.js