Initial commit

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "survivejs-kanban"
+  ],
+  "env": {
+    "start": {
+      "presets": [
+        "react-hmre"
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+

app/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(
+  <div>Hello world!</div>,
+  document.getElementById('app')
+);

app/main.css

@@ -0,0 +1,2 @@
+/* Add application CSS here */
+

lib/parts.js

@@ -0,0 +1,166 @@
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const NpmInstallPlugin = require('npm-install-webpack-plugin');
+
+exports.indexTemplate = function(options) {
+  return {
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: 'node_modules/html-webpack-template/index.ejs',
+        title: options.title,
+        appMountId: options.appMountId,
+        inject: false
+      })
+    ]
+  };
+}
+
+exports.loadJSX = function(include) {
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.(js|jsx)$/,
+          // Enable caching for extra performance
+          loaders: ['babel?cacheDirectory'],
+          include: include
+        }
+      ]
+    }
+  };
+}
+
+exports.devServer = function(options) {
+  return {
+    devServer: {
+      // Enable history API fallback so HTML5 History API based
+      // routing works. This is a good default that will come
+      // in handy in more complicated setups.
+      historyApiFallback: true,
+
+      // Unlike the cli flag, this doesn't set
+      // HotModuleReplacementPlugin!
+      hot: true,
+      inline: true,
+      progress: true,
+
+      // Display only errors to reduce the amount of output.
+      stats: 'errors-only',
+
+      // Parse host and port from env to allow customization.
+      //
+      // If you use Vagrant or Cloud9, set
+      // host: options.host || '0.0.0.0';
+      //
+      // 0.0.0.0 is available to all network devices
+      // unlike default `localhost`.
+      host: options.host, // Defaults to `localhost`
+      port: options.port // Defaults to 8080
+    },
+    plugins: [
+      // Enable multi-pass compilation for enhanced performance
+      // in larger projects. Good default.
+      new webpack.HotModuleReplacementPlugin({
+        multiStep: true
+      })
+    ]
+  };
+}
+
+exports.setupCSS = function(paths) {
+  return {
+    module: {
+      loaders: [
+        {
+          test: /\.css$/,
+          loaders: ['style', 'css'],
+          include: paths
+        }
+      ]
+    }
+  };
+}
+
+exports.minify = function() {
+  return {
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          warnings: false
+        }
+      })
+    ]
+  };
+}
+
+exports.setFreeVariable = function(key, value) {
+  const env = {};
+  env[key] = JSON.stringify(value);
+
+  return {
+    plugins: [
+      new webpack.DefinePlugin(env)
+    ]
+  };
+}
+
+exports.extractBundle = function(options) {
+  const entry = {};
+  entry[options.name] = options.entries;
+
+  return {
+    // Define an entry point needed for splitting.
+    entry: entry,
+    plugins: [
+      // Extract bundle and manifest files. Manifest is
+      // needed for reliable caching.
+      new webpack.optimize.CommonsChunkPlugin({
+        names: [options.name, 'manifest'],
+
+        // options.name modules only
+        minChunks: Infinity
+      })
+    ]
+  };
+}
+
+exports.clean = function(path) {
+  return {
+    plugins: [
+      new CleanWebpackPlugin([path], {
+        root: process.cwd()
+      })
+    ]
+  };
+}
+
+exports.extractCSS = function(paths) {
+  return {
+    module: {
+      loaders: [
+        // Extract CSS during build
+        {
+          test: /\.css$/,
+          loader: ExtractTextPlugin.extract('style', 'css'),
+          include: paths
+        }
+      ]
+    },
+    plugins: [
+      // Output extracted CSS to a file
+      new ExtractTextPlugin('[name].[chunkhash].css')
+    ]
+  };
+}
+
+exports.npmInstall = function(options) {
+  options = options || {};
+
+  return {
+    plugins: [
+      new NpmInstallPlugin(options)
+    ]
+  };
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-boilerplate",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Boilerplate for [SurviveJS - React](http://survivejs.com/react/introduction/)",
+  "scripts": {
+    "stats": "webpack --profile --json > stats.json",
+    "start": "webpack-dev-server",
+    "deploy": "gh-pages -d build",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.7.7",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-preset-survivejs-kanban": "^0.3.3",
+    "clean-webpack-plugin": "^0.1.8",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "gh-pages": "^0.11.0",
+    "html-webpack-plugin": "^2.15.0",
+    "html-webpack-template": "^4.0.0",
+    "npm-install-webpack-plugin": "^3.1.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.8.4",
+    "webpack-validator": "^1.0.2"
+  },
+  "dependencies": {
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1"
+  }
+}

webpack.config.js

@@ -0,0 +1,91 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const validate = require('webpack-validator');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const parts = require('./lib/parts');
+
+const PATHS = {
+  app: path.join(__dirname, 'app'),
+  style: [
+    path.join(__dirname, 'app/main.css')
+  ],
+  build: path.join(__dirname, 'build')
+};
+
+const common = merge({
+    // Entry accepts a path or an object of entries.
+    // We'll be using the latter form given it's
+    // convenient with more complex configurations.
+    entry: {
+      style: PATHS.style,
+      app: PATHS.app
+    },
+    output: {
+      path: PATHS.build,
+      filename: '[name].js'
+    },
+    resolve: {
+      extensions: ['', '.js', '.jsx']
+    }
+  },
+  parts.indexTemplate({
+    title: 'Kanban demo',
+    appMountId: 'app'
+  }),
+  parts.loadJSX(PATHS.app)
+);
+
+var config;
+
+// Detect how npm is run and branch based on that
+switch(process.env.npm_lifecycle_event) {
+  case 'build':
+  case 'stats':
+    config = merge(
+      common,
+      {
+        devtool: 'source-map',
+        output: {
+          path: PATHS.build,
+          filename: '[name].[chunkhash].js',
+          chunkFilename: '[chunkhash].js'
+        }
+      },
+      parts.clean(PATHS.build),
+      parts.setFreeVariable(
+        'process.env.NODE_ENV',
+        'production'
+      ),
+      parts.extractBundle({
+        name: 'vendor',
+        entries: ['react', 'react-dom']
+      }),
+      parts.minify(),
+      parts.extractCSS(PATHS.style),
+      parts.purifyCSS([PATHS.app])
+    );
+    break;
+  default:
+    config = merge(
+      common,
+      {
+        devtool: 'eval-source-map'
+      },
+      parts.setupCSS(PATHS.style),
+      parts.devServer({
+        // Customize host/port here if needed
+        host: process.env.HOST,
+        port: process.env.PORT
+      })
+      /*
+      XXXXX: broken in v3.1.0
+      https://github.com/ericclemmons/npm-install-webpack-plugin/issues/43
+      ,parts.npmInstall({
+        save: true
+      })
+      */
+    );
+}
+
+module.exports = validate(config);