Completes base web example.

ctrlplusb · ctrlplusb · commit cb6c1ab9c9e1 · 2017-01-03T09:07:15.000Z
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@ coverage
 # Build output
 umd
 commonjs
+build
 
 # Flow
 flow-coverage
diff --git a/examples/.eslintrc b/examples/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": 0
+  }
+}
diff --git a/examples/web/.babelrc b/examples/web/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "latest",
+    "stage-3"
+  ]
+}
diff --git a/examples/web/package.json b/examples/web/package.json
@@ -1,21 +1,29 @@
 {
   "name": "my-library-example",
   "version": "1.0.0",
-  "description": "",
+  "description": "An example of my-library",
   "main": "index.js",
+  "engines": {
+    "node": ">=7.0.0"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "babel-node server.js"
   },
   "author": "",
   "license": "MIT",
-  "devDependencies": {
-    "babel-core": "6.21.0",
-    "babel-loader": "6.2.10",
-    "babel-preset-latest": "6.16.0",
-    "babel-preset-stage-3": "6.17.0",
-    "express": "4.14.0",
-    "webpack": "2.2.0-rc.3",
-    "webpack-dev-middleware": "1.9.0",
-    "webpack-hot-middleware": "2.14.0"
+  "devDependencies": {},
+  "dependencies": {
+    "app-root-dir": "^1.0.2",
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-stage-3": "^6.17.0",
+    "babel-register": "^6.18.0",
+    "express": "^4.14.0",
+    "html-webpack-plugin": "^2.25.0",
+    "webpack": "^2.2.0-rc.3",
+    "webpack-dev-middleware": "^1.9.0",
+    "webpack-hot-middleware": "^2.14.0"
   }
 }
diff --git a/examples/web/server.js b/examples/web/server.js
@@ -0,0 +1,25 @@
+import express from 'express';
+import webpack from 'webpack';
+import devMiddleware from 'webpack-dev-middleware';
+import hotMiddleware from 'webpack-hot-middleware';
+import config from './tools/webpack/config';
+
+const port = process.env.PORT || 1337;
+const app = express();
+const compiler = webpack(config);
+app.use(
+  devMiddleware(compiler, {
+    quiet: true,
+    noInfo: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    // Ensure that the public path is taken from the compiler webpack config
+    // as it will have been created as an absolute path to avoid conflicts
+    // with an node servers.
+    publicPath: compiler.options.output.publicPath,
+  }),
+);
+app.use(hotMiddleware(compiler));
+
+app.listen(port, () => console.log(`Example running on port ${port}...`));
diff --git a/examples/web/src/index.js b/examples/web/src/index.js
@@ -0,0 +1 @@
+document.getElementById('app').innerHTML = '<h1>poop</h1>';
diff --git a/examples/web/tools/webpack/config.js b/examples/web/tools/webpack/config.js
@@ -0,0 +1,41 @@
+import { resolve as resolvePath } from 'path';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import appRootDir from 'app-root-dir';
+import pkg from '../../package.json';
+
+module.exports = {
+  entry: {
+    index: resolvePath(appRootDir.get(), './src/index.js'),
+  },
+  output: {
+    path: resolvePath(appRootDir.get(), './build'),
+    filename: `${pkg.name}.js`,
+    publicPath: '/',
+  },
+  target: 'web',
+  plugins: [
+    new webpack.NoErrorsPlugin(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: resolvePath(__dirname, './html.js'),
+      inject: true,
+      // We can pass custom data to the template...
+      custom: {
+        name: pkg.name,
+        description: pkg.description,
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [
+          resolvePath(appRootDir.get(), './src'),
+        ],
+      },
+    ],
+  },
+};
diff --git a/examples/web/tools/webpack/html.js b/examples/web/tools/webpack/html.js
@@ -0,0 +1,19 @@
+module.exports = function html(templateParams) {
+  const { name, description } = templateParams.htmlWebpackPlugin.options.custom;
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <meta name="description" content="${description}"/>
+        <meta name="charset" content="utf-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <title>${name} example</title>
+      </head>
+      <body>
+        <div id='app'></div>
+        <script src="/build/library.js" type="text/javascript"></script>
+      </body>
+    </html>`;
+};
diff --git a/examples/web/yarn.lock b/examples/web/yarn.lock
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "rules": {
 +    "no-console": 0
 +  }
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+document.getElementById('app').innerHTML = '<h1>poop</h1>';`