Add more examples.

Ref #581
webpack · Sep 3, 2016 · be21827 · be21827
1 parent 6d064d9
commit be21827
Show file tree

Hide file tree

Showing 34 changed files with 228 additions and 5 deletions.
diff --git a/examples/cli-public/README.md b/examples/cli-public/README.md
@@ -0,0 +1,15 @@
+# https
+
+NOTE: replace `<insert local ip>` with your local ip.
+
+```shell
+node ../../bin/webpack-dev-server.js --open --host 0.0.0.0 --public <insert local ip>:8080
+```
+
+If you want to make the client publicly accessible, the client needs to know with what host to connect to the server. If `--host 0.0.0.0` is given, the client would try to connect to `0.0.0.0`. With `--public` it is possible to override this.
+
+## What should happen
+
+The script should open `http://0.0.0.0:8080/`. In the app you should see "It's working."
+
+Verify that the websocket is connecting to `<insert local ip>:8080`. Go to devtools -> Network, click on "websocket" and check "Request URL".
diff --git a/examples/cli-public/app.js b/examples/cli-public/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/cli-public/index.html b/examples/cli-public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: CLI public</h1>
+	</body>
+</html>
diff --git a/examples/cli-public/webpack.config.js b/examples/cli-public/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/cli-stdin/README.md b/examples/cli-stdin/README.md
@@ -0,0 +1,11 @@
+# https
+
+```shell
+node ../../bin/webpack-dev-server.js --stdin
+```
+
+When stdin ends, we want to close the webpack-dev-server.
+
+## What should happen
+
+The script should start up. When `ctrl+D` is pressed, the server should quit. Note that the shortcut can differ on operating systems, but the point is to signify the end of input.
diff --git a/examples/cli-stdin/app.js b/examples/cli-stdin/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/cli-stdin/index.html b/examples/cli-stdin/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: CLI - stdin</h1>
+	</body>
+</html>
diff --git a/examples/cli-stdin/webpack.config.js b/examples/cli-stdin/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/compression/README.md b/examples/compression/README.md
@@ -0,0 +1,13 @@
+# Compression
+
+```shell
+node ../../bin/webpack-dev-server.js --open --compress
+```
+
+Gzip compression is enabled. 
+
+## What should happen
+
+The script should open `https://localhost:8080/`.
+
+Open the devtools -> `Network` tab, and find `bundle.js`. The response headers should have a `Content-Encoding: gzip` header.
diff --git a/examples/compression/app.js b/examples/compression/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/compression/index.html b/examples/compression/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: compression</h1>
+	</body>
+</html>
diff --git a/examples/compression/webpack.config.js b/examples/compression/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/history-api-fallback/README.md b/examples/history-api-fallback/README.md
@@ -0,0 +1,15 @@
+# History API fallback
+
+```shell
+node ../../bin/webpack-dev-server.js --open --history-api-fallback
+```
+
+Enables support for history API fallback, which means that a request will fallback to `/index.html` if no resource can be found.
+
+Note that by default, some URLs don't work. For example, if the url contains a dot. Be sure to checkout the [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback) options.
+
+## What should happen
+
+The script should open `http://localhost:8080/`, and you should see "It's working from path /".
+
+Go to `http://localhost:8080/foo/bar`. You should see "It's working from path /foo/bar".
diff --git a/examples/history-api-fallback/app.js b/examples/history-api-fallback/app.js
@@ -0,0 +1,2 @@
+var path = document.location.pathname;
+document.write("It's working from path <b>" + path + "</b>");
diff --git a/examples/history-api-fallback/index.html b/examples/history-api-fallback/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: history API fallback</h1>
+	</body>
+</html>
diff --git a/examples/history-api-fallback/webpack.config.js b/examples/history-api-fallback/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/host-port/README.md b/examples/host-port/README.md
@@ -0,0 +1,13 @@
+# https
+
+```shell
+node ../../bin/webpack-dev-server.js --open --port 5000 --host 0.0.0.0
+```
+
+We want to change the port to `5000`, and make the server publicly accessible.
+
+## What should happen
+
+The script should open `http://0.0.0.0:5000/`. You should see "It's working."
+
+Get your local ip (e.g. `192.168.1.40`), and try it from `192.168.1.40:5000`. Make sure your firewall doesn't block this port.
diff --git a/examples/host-port/app.js b/examples/host-port/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/host-port/index.html b/examples/host-port/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: host and port</h1>
+	</body>
+</html>
diff --git a/examples/host-port/webpack.config.js b/examples/host-port/webpack.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+}
diff --git a/examples/modus-iframe/index.html b/examples/modus-iframe/index.html
@@ -4,6 +4,6 @@
 		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Example: iframe</h1>
+		<h1>Example: modus - iframe</h1>
 	</body>
 </html>
diff --git a/examples/modus-inline/index.html b/examples/modus-inline/index.html
@@ -4,7 +4,7 @@
 		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Example: inline</h1>
+		<h1>Example: modus - inline</h1>
 		<br>
 		<img src="/svg.svg" style="width: 200px;">
 	</body>

diff --git a/examples/modus-lazy/README.md b/examples/modus-lazy/README.md
@@ -4,7 +4,7 @@
 node ../../bin/webpack-dev-server.js --open --lazy
 ```
 
-With the `lazy` modus, webpack-dev-server does *not* watch the files, automatically recompiles them and refresh the browser. Instead, it only compiles after you manually refresh the page.
+With the `lazy` modus, webpack-dev-server does **not** watch the files, automatically recompile them or refresh the browser. Instead, it only compiles after you manually refresh the page.
 
 ## What should happen
 

diff --git a/examples/modus-lazy/index.html b/examples/modus-lazy/index.html
@@ -4,6 +4,6 @@
 		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Example: lazy</h1>
+		<h1>Example: modus - lazy</h1>
 	</body>
 </html>
diff --git a/examples/modus-manual-script/index.html b/examples/modus-manual-script/index.html
@@ -5,6 +5,6 @@
 		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Example: manual script</h1>
+		<h1>Example: modus - manual script</h1>
 	</body>
 </html>
diff --git a/examples/proxy-advanced/README.md b/examples/proxy-advanced/README.md
@@ -0,0 +1,15 @@
+# Proxy: simple
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+We want to proxy all urls that start with `/api` to `http://jsonplaceholder.typicode.com/`, but remove `/api` from the url. So `http://localhost:8080/api/users` should do a request to `http://jsonplaceholder.typicode.com/users`.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. It should show "It's working."
+
+Go to `http://localhost:8080/api/users`. It should show a couple of JSON objects.
+
+Go to `http://localhost:8080/api/nope`. It should show the "Bypassed proxy!".
diff --git a/examples/proxy-advanced/app.js b/examples/proxy-advanced/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/proxy-advanced/bypass.html b/examples/proxy-advanced/bypass.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<h1>Example: proxy advanced</h1>
+
+		Bypassed proxy!
+	</body>
+</html>
diff --git a/examples/proxy-advanced/index.html b/examples/proxy-advanced/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: proxy - advanced</h1>
+	</body>
+</html>
diff --git a/examples/proxy-advanced/webpack.config.js b/examples/proxy-advanced/webpack.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	devServer: {
+		proxy: {
+			'/api': {
+				target: 'http://jsonplaceholder.typicode.com/',
+				changeOrigin: true,
+				pathRewrite: {
+					'^/api': ''
+				},
+				bypass: function(req) {
+					if (req.url === '/api/nope') {
+						return '/bypass.html';
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/examples/proxy-simple/README.md b/examples/proxy-simple/README.md
@@ -0,0 +1,13 @@
+# Proxy: simple
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+In `webpack.config.js` there is a very simple configuration for a proxy. Note that this only works when proxying to a direct ip address. See the proxy-advanced example if you want to proxy to a domain.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. It should show "It's working."
+
+Browse to `http://localhost:8080/api/hey`. Since the proxy target does not actually exist, the CLI should give the error `[HPM] PROXY ERROR: ECONNREFUSED. localhost -> http://127.0.0.1:50545/api/hey`.
diff --git a/examples/proxy-simple/app.js b/examples/proxy-simple/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/proxy-simple/index.html b/examples/proxy-simple/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: proxy - simple</h1>
+	</body>
+</html>
diff --git a/examples/proxy-simple/webpack.config.js b/examples/proxy-simple/webpack.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	devServer: {
+		proxy: {
+			'/api': 'http://127.0.0.1:50545',
+		}
+	}
+}