Adds base react web example.

Author: ctrlplusb

.eslintrc

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "extends": "airbnb-base",
+  "extends": "airbnb",
   "plugins": [
     "flowtype"
   ],
@@ -14,5 +14,7 @@
   "ecmaFeatures": {
     "defaultParams": true
   },
-  "rules": {}
+  "rules": {
+    "react/jsx-filename-extension": 0
+  }
 }

.gitignore

@@ -14,6 +14,7 @@ coverage
 # Build output
 umd
 commonjs
+build
 
 # Flow
 flow-coverage

examples/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": 0
+  }
+}

examples/web/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "latest",
+    "stage-3",
+    "react"
+  ]
+}

examples/web/package.json

@@ -1,21 +1,32 @@
 {
   "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-react": "^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",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "webpack": "^2.2.0-rc.3",
+    "webpack-dev-middleware": "^1.9.0",
+    "webpack-hot-middleware": "^2.14.0"
   }
 }

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}...`));

examples/web/src/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+function App() {
+  return <div>poop</div>;
+}
+
+render(<App />, document.getElementById('app'));

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'),
+        ],
+      },
+    ],
+  },
+};

examples/web/tools/webpack/html.js

@@ -0,0 +1,18 @@
+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>
+      </body>
+    </html>`;
+};