Skip to content

Commit b10c9eb

Browse files
shellscapeshellscape
authored
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
1 parent 2e501c8 commit b10c9eb

File tree

204 files changed

+1567
-1029
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

204 files changed

+1567
-1029
lines changed

‎examples/.assets/favicon.ico

31.3 KB
Binary file not shown.

‎examples/.assets/geomanist-medium.woff

18.8 KB
Binary file not shown.

‎examples/.assets/geomanist-medium.woff2

14.5 KB
Binary file not shown.

‎examples/.assets/icon-square.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/.assets/layout.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>WDS ▻ <%= htmlWebpackPlugin.options.title %></title>
5+
<meta charset="utf-8"/>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="shortcut icon" href="/.assets/favicon.ico"/>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,500,600"/>
9+
<link rel="stylesheet" href="/.assets/style.css"/>
10+
</head>
11+
<body>
12+
<main>
13+
<header>
14+
<h1>
15+
<img src="/.assets/icon-square.svg" style="width: 35px; height: 35px;"/>
16+
webpack-dev-server
17+
</h1>
18+
</header>
19+
<section>
20+
<h2><%= htmlWebpackPlugin.options.title %></h2>
21+
<div id="target"></div>
22+
</section>
23+
</main>
24+
<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
25+
</body>
26+
</html>

‎examples/.assets/style.css

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@font-face {
2+
font-family: 'Geomanist';
3+
font-style: normal;
4+
font-weight: 600;
5+
src: url('assets/geomanist-medium.woff2') format('woff2'),
6+
url('assets/geomanist-medium.woff') format('woff');
7+
}
8+
9+
html,
10+
body {
11+
background-color: #f3f3f3;
12+
color: #2B3A42;
13+
font: 400 10px "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
-webkit-font-smoothing: antialiased;
18+
-moz-osx-font-smoothing: grayscale;
19+
}
20+
21+
a {
22+
color: #2086d7;
23+
text-decoration: none;
24+
transition: color 250ms;
25+
}
26+
27+
a:hover {
28+
color: #1a6aab;
29+
}
30+
31+
main {
32+
width: 100%;
33+
max-width: 94.2rem;
34+
margin: 0px auto;
35+
padding: 8rem 2.4rem;
36+
}
37+
38+
h1 {
39+
font-size: 3.4rem;
40+
font-weight: 600;
41+
line-height: 3.4rem;
42+
margin-top: 0;
43+
padding-top: 0;
44+
}
45+
46+
h1 img {
47+
height: 3.4rem;
48+
width: 3.4rem;
49+
vertical-align: middle;
50+
}
51+
52+
h2 {
53+
font-size: 2.8rem;
54+
}
55+
56+
section {
57+
padding: 0 0 0 4.2rem;
58+
}
59+
60+
div, p, table {
61+
font-size: 1.6rem;
62+
}
63+
64+
code {
65+
background-color: rgba(70, 94, 105, 0.06);
66+
border-radius: 3px;
67+
font-family: "Source Code Pro", Consolas, "Liberation Mono", Menlo, Courier, monospace;
68+
font-size: 1.44rem;
69+
margin: 0;
70+
max-width: 100%;
71+
line-height: initial;
72+
overflow: auto;
73+
padding: 2px 6px;
74+
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
75+
vertical-align: middle;
76+
white-space: normal;
77+
}
78+
79+
#target {
80+
background: #DCF2FD;
81+
border: 0.1rem solid #618ca0;
82+
border-radius: 0.3rem;
83+
color: #618ca0;
84+
margin: 2rem 0;
85+
padding: 2rem;
86+
}
87+
88+
#target.warn {
89+
background: #fcf8e3;
90+
border: 0.1rem solid #8a6d3b;
91+
color: #8a6d3b;
92+
}
93+
94+
#target.pass {
95+
background: #f2f9f4;
96+
border: 0.1rem solid #4db277;
97+
color: #4db277;
98+
}
99+
100+
#target.fail {
101+
background: #f2dede;
102+
border: 0.1rem solid #a94442;
103+
color: #a94442;
104+
}

‎examples/README.md

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,29 @@
11
# Examples
22

3-
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.
3+
Each example showcases a particular feature of `webpack-dev-server`. You can use
4+
these examples to learn how to use certain features, or as a means to test features
5+
when working on a Pull Request.
46

5-
An example should be as minimal as possible, and consists of:
7+
An example should be as minimal as possible and consists of at least:
68

7-
- The code that is necessary
8-
- Instructions on how to run
9-
- A description of what should happen
9+
- An `app.js` file - the entry point for an example app.
10+
- A `README.md` file containing information about, and how to run the example app.
11+
- A description of what should happen when running the example.
12+
- A `wepack.config.js` file containing the `webpack` configuration for the example app.
13+
14+
## API versus CLI
15+
16+
API examples can be found in the `api` directory. These examples demonstrate how
17+
to access and run `webpack-dev-server` directly in your application / script.
18+
19+
CLI exampes can be found in the `cli` directory. These examples demonstrate how
20+
to run `webpack-dev-server` from the command line in your console / terminal.
21+
22+
## Notes
23+
24+
- Each example's `webpack` config is wrapped with `util.setup`; a helper function
25+
that adds plugins and configuration needed by each example to render in a consistent
26+
and visually pleasing way.
27+
- Examples' `bundle.js` and `index.html` files are compiled and served from memory.
28+
You won't actually see these files written to disk, but if you examine the `webpack`
29+
output, you should see their file indicators.

‎examples/api/middleware/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# API: Custom Middleware
2+
3+
While it's recommended to run `webpack-dev-server` via the CLI, you may also
4+
choose to start a server via the API. This example demonstrates using one of the
5+
few custom middleware options; `before`.
6+
7+
```console
8+
node server.js
9+
```
10+
11+
## What Should Happen
12+
13+
1. Open `http://localhost:8080/` in your preferred browser.
14+
2. You should see the text on the page itself change to read `Success!`.
15+
3. In the console/terminal, you should see the following for each refresh in
16+
the browser:
17+
```
18+
Using middleware for /
19+
Using middleware for /bundle.js
20+
```

‎examples/api/middleware/app.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
3+
const target = document.querySelector('#target');
4+
5+
target.classList.add('pass');
6+
target.innerHTML = 'Success!';

‎examples/node-api-middleware/server.js renamed to ‎examples/api/middleware/server.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use strict';
22

33
const Webpack = require('webpack');
4-
const WebpackDevServer = require('../../lib/Server');
4+
const WebpackDevServer = require('../../../lib/Server');
55
const webpackConfig = require('./webpack.config');
66

77
const compiler = Webpack(webpackConfig);
8-
const server = new WebpackDevServer(compiler, {
8+
const devServerOptions = Object.assign({}, webpackConfig.devServer, {
99
stats: {
1010
colors: true
1111
},
@@ -16,6 +16,7 @@ const server = new WebpackDevServer(compiler, {
1616
});
1717
}
1818
});
19+
const server = new WebpackDevServer(compiler, devServerOptions);
1920

2021
server.listen(8080, '127.0.0.1', () => {
2122
console.log('Starting server on http://localhost:8080');

‎examples/api/middleware/webpack.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
// our setup function adds behind-the-scenes bits to the config that all of our
4+
// examples need
5+
const { setup } = require('../../util');
6+
7+
module.exports = setup({
8+
context: __dirname,
9+
entry: ['./app.js', '../../client/index.js?http://localhost:8080/'],
10+
output: {
11+
filename: 'bundle.js'
12+
}
13+
});

‎examples/api/simple/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# API: Simple Server
2+
3+
While it's recommended to run `webpack-dev-server` via the CLI, you may also
4+
choose to start a server via the API. This example starts a simple server setup.
5+
6+
```console
7+
node server.js
8+
```
9+
10+
## What should happen
11+
12+
1. Open `http://localhost:8080/` in your preferred browser.
13+
2. You should see the text on the page itself change to read `Success!`.
14+
3. In `app.js`, uncomment the code that results in an error and save. This error
15+
should be visible in the console/terminal and in browser devtools.
16+
4. In `app.js`, uncomment the code that results in a warning. This warning should
17+
be visible in the console/terminal and in browser devtools.

‎examples/node-api-middleware/app.js renamed to ‎examples/api/simple/app.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
'use strict';
22

3-
document.write("It's working.");
3+
const target = document.querySelector('#target');
4+
5+
target.classList.add('pass');
6+
target.innerHTML = 'Success!';
47

58
// This results in a warning:
69
if (!window) {
@@ -9,4 +12,6 @@ if (!window) {
912
}
1013

1114
// This results in an error:
12-
// if(!window) require("test");
15+
// if(!window) {
16+
// require("test");
17+
// }

‎examples/node-api-simple/server.js renamed to ‎examples/api/simple/server.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
'use strict';
22

33
const Webpack = require('webpack');
4-
const WebpackDevServer = require('../../lib/Server');
4+
const WebpackDevServer = require('../../../lib/Server');
55
const webpackConfig = require('./webpack.config');
66

77
const compiler = Webpack(webpackConfig);
8-
const server = new WebpackDevServer(compiler, {
8+
const devServerOptions = Object.assign({}, webpackConfig.devServer, {
99
stats: {
1010
colors: true
1111
}
1212
});
13+
const server = new WebpackDevServer(compiler, devServerOptions);
1314

1415
server.listen(8080, '127.0.0.1', () => {
1516
console.log('Starting server on http://localhost:8080');

‎examples/api/simple/webpack.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict';
2+
3+
// our setup function adds behind-the-scenes bits to the config that all of our
4+
// examples need
5+
const { setup } = require('../../util');
6+
7+
module.exports = setup({
8+
context: __dirname,
9+
entry: ['./app.js', '../../../client/index.js?http://localhost:8080/'],
10+
output: {
11+
filename: 'bundle.js'
12+
}
13+
});

‎examples/bonjour/README.md

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎examples/bonjour/app.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎examples/bonjour/index.html

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/cli-open-page/README.md

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎examples/cli-open-page/app.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎examples/cli-open-page/example.html

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/cli-open-page/webpack.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/cli-public-protocol/README.md

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎examples/cli-public-protocol/app.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎examples/cli-public-protocol/webpack.config.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

0 commit comments

Comments
 (0)