Update web-starter

.eslintrc

@@ -0,0 +1,26 @@
+{
+  "parser": "babel-eslint",
+  "plugins": [
+    "import",
+    "react"
+  ],
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended"
+  ],
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "rules": {
+    "array-bracket-spacing": [ 2, "always" ],
+    "eqeqeq": [ 2, "smart" ],
+    "prefer-arrow-callback": 2,
+    "react/no-danger": 0,
+    "semi": [ 2, "never" ]
+  }
+}

modules/client/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "browser": true
+  }
+}

modules/client/components/Layout.js

@@ -4,6 +4,11 @@ import { findDOMNode } from 'react-dom'
 import Window from './Window'
 
 class Layout extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+    children: PropTypes.node
+  }
+
   state = {
     underlineLeft: 0,
     underlineWidth: 0,

modules/client/components/NumberTextInput.js

@@ -5,7 +5,8 @@ class NumberTextInput extends React.Component {
   static propTypes = {
     value: PropTypes.number,
     parseNumber: PropTypes.func,
-    formatNumber: PropTypes.func
+    formatNumber: PropTypes.func,
+    onChange: PropTypes.func
   }
 
   static defaultProps = {

modules/client/components/Stats.js

@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react'
-import { findDOMNode } from 'react-dom'
 import formatBytes from 'byte-size'
 import formatDate from 'date-fns/format'
 import parseDate from 'date-fns/parse'
@@ -21,8 +20,12 @@ const addValues = (a, b) => {
 }
 
 class Stats extends React.Component {
+  static propTypes = {
+    stats: PropTypes.object
+  }
+
   static defaultProps = {
-    stats: window.NPMCDN_STATS
+    stats: window.npmcdnStats
   }
 
   state = {
@@ -83,13 +86,13 @@ class Stats extends React.Component {
     })
 
     topContinents.forEach(continent => {
-      const name = ContinentsIndex[continent]
+      const continentName = ContinentsIndex[continent]
       const { countries, requests, bandwidth } = continentData[continent]
 
       if (bandwidth !== 0) {
         regionRows.push(
           <tr key={continent} className="continent-row">
-            <td>{ContinentsIndex[continent]}</td>
+            <td>{continentName}</td>
             <td>{formatNumber(requests)} ({formatPercent(requests / totalRequests)}%)</td>
             <td>{formatBytes(bandwidth)} ({formatPercent(bandwidth / totalBandwidth)}%)</td>
           </tr>

modules/server/AssetsUtils.js

@@ -31,6 +31,29 @@ const createBundle = (webpackStats) => {
   }
 }
 
+/**
+ * An express middleware that sets req.manifest from the build manifest
+ * in the given file. Should be used in production to get consistent hashes.
+ */
+export const assetsManifest = (webpackManifestFile) => {
+  let manifest
+  try {
+    manifest = JSON.parse(fs.readFileSync(webpackManifestFile, 'utf8'))
+  } catch (error) {
+    invariant(
+      false,
+      'assetsManifest middleware cannot read the manifest file "%s"; ' +
+      'do `npm run build` before starting the server',
+      webpackManifestFile
+    )
+  }
+
+  return (req, res, next) => {
+    req.manifest = manifest
+    next()
+  }
+}
+
 /**
  * An express middleware that sets req.bundle from the build
  * info in the given stats file. Should be used in production.

modules/server/MainController.js

@@ -26,11 +26,15 @@ const fetchStats = (callback) => {
 }
 
 export const sendHomePage = (req, res, next) => {
+  const chunks = [ 'vendor', 'home' ]
   const props = {
-    styles: req.bundle.getStyleAssets([ 'vendor', 'home' ]),
+    styles: req.bundle.getStyleAssets(chunks),
-    scripts: req.bundle.getScriptAssets([ 'vendor', 'home' ])
+    scripts: req.bundle.getScriptAssets(chunks)
   }
 
+  if (req.manifest)
+    props.webpackManifest = req.manifest
+
   fetchStats((error, stats) => {
     if (error) {
       next(error)

modules/server/ServerConfig.js

@@ -2,10 +2,12 @@ import path from 'path'
 
 export const id = 1
 export const port = parseInt(process.env.PORT, 10) || 5000
-export const timeout = parseInt(process.env.TIMEOUT, 10) || 20000
+export const webpackConfig = require('../../webpack.config')
 export const statsFile = path.resolve(__dirname, '../../stats.json')
 export const publicDir = path.resolve(__dirname, '../../public')
-export const webpackConfig = require('../../webpack.config')
+export const manifestFile = path.resolve(publicDir, '__assets__/chunk-manifest.json')
+export const timeout = parseInt(process.env.TIMEOUT, 10) || 20000
+export const maxAge = process.env.MAX_AGE || '365d'
 
 export const registryURL = process.env.REGISTRY_URL || 'https://registry.npmjs.org'
 export const bowerBundle = process.env.BOWER_BUNDLE || '/bower.zip'

modules/server/components/HomePage.js

@@ -2,33 +2,39 @@ import React, { PropTypes } from 'react'
 
 class HomePage extends React.Component {
   static propTypes = {
+    webpackManifest: PropTypes.object,
     styles: PropTypes.arrayOf(PropTypes.string),
     scripts: PropTypes.arrayOf(PropTypes.string),
     stats: PropTypes.object
   }
 
   static defaultProps = {
+    webpackManifest: {},
     styles: [],
     scripts: [],
     stats: {}
   }
 
-  render = () => {
+  render() {
-    const { styles, scripts, stats } = this.props
+    const { webpackManifest, styles, scripts, stats } = this.props
 
     return (
       <html>
         <head>
+          <meta charSet="utf-8"/>
           <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
           <meta name="viewport" content="width=700,maximum-scale=1"/>
           <meta name="timestamp" content={(new Date).toISOString()}/>
           <title>npmcdn</title>
-          {styles.map(style => <link key={style} rel="stylesheet" href={style}/>)}
+          <script dangerouslySetInnerHTML={{ __html: "window.Promise || document.write('\\x3Cscript src=\"/es6-promise.min.js\">\\x3C/script>\\x3Cscript>ES6Promise.polyfill()\\x3C/script>')" }}/>
-          <script dangerouslySetInnerHTML={{ __html: `window.NPMCDN_STATS=${JSON.stringify(stats)}` }}/>
+          <script dangerouslySetInnerHTML={{ __html: "window.fetch || document.write('\\x3Cscript src=\"/fetch.min.js\">\\x3C/script>')" }}/>
+          <script dangerouslySetInnerHTML={{ __html: "window.webpackManifest = " + JSON.stringify(webpackManifest) }}/>
+          <script dangerouslySetInnerHTML={{ __html: "window.npmcdnStats = " + JSON.stringify(stats) }}/>
+          {styles.map(s => <link rel="stylesheet" key={s} href={s}/>)}
         </head>
         <body>
           <div id="app"/>
-          {scripts.map(script => <script key={script} src={script}/>)}
+          {scripts.map(s => <script key={s} src={s}/>)}
         </body>
       </html>
     )

modules/server/index.js

@@ -8,7 +8,7 @@ import devErrorHandler from 'errorhandler'
 import WebpackDevServer from 'webpack-dev-server'
 import { createRequestHandler } from 'npm-http-server'
 import * as DefaultServerConfig from './ServerConfig'
-import { staticAssets, devAssets, createDevCompiler } from './AssetsUtils'
+import { assetsManifest, staticAssets, devAssets, createDevCompiler } from './AssetsUtils'
 import { sendHomePage } from './MainController'
 import { logStats } from './StatsUtils'
 
@@ -38,7 +38,8 @@ export const createServer = (config) => {
 
   app.use(errorHandler)
   app.use(cors())
-  app.use(express.static(config.publicDir, { maxAge: 60000 }))
+  app.use(express.static(config.publicDir, { maxAge: config.maxAge }))
+  app.use(assetsManifest(config.manifestFile))
   app.use(staticAssets(config.statsFile))
   app.use(createRouter(config))
 

package.json

@@ -6,16 +6,21 @@
     "build": "npm run build-assets && npm run build-lib",
     "build-assets": "NODE_ENV=production webpack -p --json > stats.json",
     "build-lib": "rimraf lib && babel ./modules -d lib --copy-files",
-    "heroku-postbuild": "npm run build"
+    "heroku-postbuild": "npm run build",
+    "lint": "eslint modules",
+    "test": "npm run lint"
   },
   "dependencies": {
     "autoprefixer": "^6.3.6",
     "babel-cli": "^6.8.0",
+    "babel-core": "^6.9.1",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
     "byte-size": "^2.0.0",
+    "chunk-manifest-webpack-plugin": "^0.1.0",
     "cors": "^2.7.1",
     "countries-list": "^1.1.0",
     "css-loader": "^0.23.1",
@@ -35,18 +40,24 @@
     "npm-http-server": "^2.14.2",
     "on-finished": "^2.3.0",
     "postcss-loader": "^0.9.1",
-    "react": "^15.0.2",
+    "react": "^15.1.0",
-    "react-dom": "^15.0.2",
+    "react-dom": "^15.1.0",
     "react-motion": "^0.4.3",
     "redis": "^2.6.0-1",
     "rimraf": "^2.5.2",
     "style-loader": "^0.13.1",
     "throng": "^4.0.0",
     "webpack": "^1.13.0",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^1.14.1",
+    "webpack-md5-hash": "0.0.5"
   },
   "devDependencies": {
-    "babel-register": "^6.8.0"
+    "babel-eslint": "^6.0.4",
+    "babel-register": "^6.8.0",
+    "eslint": "^3.0.1",
+    "eslint-import-resolver-webpack": "^0.4.0",
+    "eslint-plugin-import": "^1.8.1",
+    "eslint-plugin-react": "^5.1.1"
   },
   "engines": {
     "node": "5.8.x"
@@ -56,6 +67,9 @@
       "es2015",
       "react",
       "stage-1"
+    ],
+    "plugins": [
+      "transform-object-assign"
     ]
   }
 }

webpack.config.js

@@ -1,18 +1,18 @@
 const path = require('path')
 const webpack = require('webpack')
 const autoprefixer = require('autoprefixer')
+const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-
+const WebpackMD5Hash = require('webpack-md5-hash')
-const outputPrefix = '[chunkhash:8]-'
 
 module.exports = {
   entry: {
-    vendor: [ 'react' ],
+    vendor: [ 'react', 'react-dom' ],
     home: path.resolve(__dirname, 'modules/client/home.js')
   },
 
   output: {
-    filename: `${outputPrefix}[name].js`,
+    filename: '[chunkhash:8]-[name].js',
     path: path.resolve(__dirname, 'public/__assets__'),
     publicPath: '/__assets__/'
   },
@@ -28,12 +28,20 @@ module.exports = {
   },
 
   plugins: [
-    new webpack.optimize.OccurrenceOrderPlugin(),
+    new WebpackMD5Hash(),
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
+    new webpack.optimize.CommonsChunkPlugin({
-    new ExtractTextPlugin(`${outputPrefix}styles.css`),
+      name: 'vendor',
+      minChunks: Infinity
+    }),
+    new ChunkManifestPlugin({
+      filename: 'chunk-manifest.json',
+      manifestVariable: 'webpackManifest'
+    }),
+    new ExtractTextPlugin('[chunkhash:8]-styles.css'),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-    })
+    }),
+    new webpack.optimize.OccurrenceOrderPlugin()
   ],
 
   postcss: () => [ autoprefixer ]