Update to use latest SSR features

- Use vue-server-renderer 2.2.0 + vue-ssr-webpack-plugin to handle Webpack code-split bundle - Use vue-router 2.2.0 to handle async components and async route hooks - Use vue-loader 10.2.0 + vue-style-loader 2.0 for inline critical CSS + better style split - Use vue-srr-html-stream to simplify streaming usage.

Update to use latest SSR features
1b078be1 · Evan You · 6f0c0fef · 1b078be1 · 1b078be1 · 1b078be1
Commit 1b078be1 authored Jan 31, 2017 by Evan You
10 changed files
--- a/build/setup-dev-server.js
+++ b/build/setup-dev-server.js
@@ -28,7 +28,7 @@ module.exports = function setupDevServer (app, opts) {
    const filePath = path.join(clientConfig.output.path, 'index.html')
    if (fs.existsSync(filePath)) {
      const index = fs.readFileSync(filePath, 'utf-8')
-      opts.indexUpdated(index)
+      opts.templateUpdated(index)
    }
  })
@@ -38,13 +38,15 @@ module.exports = function setupDevServer (app, opts) {
  // watch and update server renderer
  const serverCompiler = webpack(serverConfig)
  const mfs = new MFS()
-  const outputPath = path.join(serverConfig.output.path, serverConfig.output.filename)
  serverCompiler.outputFileSystem = mfs
  serverCompiler.watch({}, (err, stats) => {
    if (err) throw err
    stats = stats.toJson()
    stats.errors.forEach(err => console.error(err))
    stats.warnings.forEach(err => console.warn(err))
-    opts.bundleUpdated(mfs.readFileSync(outputPath, 'utf-8'))
+    // read bundle generated by vue-ssr-webpack-plugin
+    const bundlePath = path.join(serverConfig.output.path, 'vue-ssr-bundle.json')
+    opts.bundleUpdated(JSON.parse(mfs.readFileSync(bundlePath, 'utf-8')))
  })
 }
--- a/build/webpack.base.config.js
+++ b/build/webpack.base.config.js
@@ -4,9 +4,9 @@ const vueConfig = require('./vue-loader.config')
 module.exports = {
  devtool: '#source-map',
  entry: {
-    app: './src/client-entry.js',
+    app: './src/entry-client.js',
    vendor: [
-      'es6-promise',
+      'es6-promise/auto',
      'firebase/app',
      'firebase/database',
      'vue',

--- a/build/webpack.client.config.js
+++ b/build/webpack.client.config.js
@@ -2,7 +2,6 @@ const webpack = require('webpack')
 const base = require('./webpack.base.config')
 const vueConfig = require('./vue-loader.config')
 const HTMLPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const SWPrecachePlugin = require('sw-precache-webpack-plugin')
 const config = Object.assign({}, base, {
@@ -12,7 +11,7 @@ const config = Object.assign({}, base, {
    })
  },
  plugins: (base.plugins || []).concat([
-    // strip comments in Vue code
+    // strip dev-only code in Vue source
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"client"'
@@ -29,30 +28,14 @@ const config = Object.assign({}, base, {
 })
 if (process.env.NODE_ENV === 'production') {
-  // Use ExtractTextPlugin to extract CSS into a single file
-  // so it's applied on initial render.
-  // vueConfig is already included in the config via LoaderOptionsPlugin
-  // here we overwrite the loader config for <style lang="stylus">
-  // so they are extracted.
-  vueConfig.loaders = {
-    stylus: ExtractTextPlugin.extract({
-      loader: 'css-loader!stylus-loader',
-      fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader
-    })
-  }
  config.plugins.push(
-    new ExtractTextPlugin('styles.[hash].css'),
-    // this is needed in webpack 2 for minifying CSS
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    }),
    // minify JS
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
+    // auto generate service worker
    new SWPrecachePlugin({
      cacheId: 'vue-hn',
      filename: 'service-worker.js',

--- a/build/webpack.server.config.js
+++ b/build/webpack.server.config.js
 const webpack = require('webpack')
 const base = require('./webpack.base.config')
+const VueSSRPlugin = require('vue-ssr-webpack-plugin')
 module.exports = Object.assign({}, base, {
  target: 'node',
-  devtool: false,
+  entry: './src/entry-server.js',
-  entry: './src/server-entry.js',
  output: Object.assign({}, base.output, {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
@@ -19,6 +19,7 @@ module.exports = Object.assign({}, base, {
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
-    })
+    }),
+    new VueSSRPlugin()
  ]
 })
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
    "vue": "^2.1.10",
    "vue-router": "^2.1.0",
    "vue-server-renderer": "^2.1.10",
+    "vue-ssr-html-stream": "^1.0.0",
    "vuex": "^2.1.0",
    "vuex-router-sync": "^4.0.2"
  },
@@ -34,7 +35,6 @@
    "buble": "^0.15.1",
    "buble-loader": "^0.4.0",
    "css-loader": "^0.26.0",
-    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "rimraf": "^2.5.4",
@@ -42,7 +42,8 @@
    "stylus-loader": "^2.4.0",
    "sw-precache-webpack-plugin": "^0.7.0",
    "url-loader": "^0.5.7",
-    "vue-loader": "^10.0.2",
+    "vue-loader": "^10.2.0",
+    "vue-ssr-webpack-plugin": "^1.0.0",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.2.0",
    "webpack-dev-middleware": "^1.8.4",

--- a/server.js
+++ b/server.js
@@ -3,7 +3,7 @@ const path = require('path')
 const express = require('express')
 const favicon = require('serve-favicon')
 const compression = require('compression')
-const serialize = require('serialize-javascript')
+const HTMLStream = require('vue-ssr-html-stream')
 const resolve = file => path.resolve(__dirname, file)
 const isProd = process.env.NODE_ENV === 'production'
@@ -13,12 +13,12 @@ const serverInfo =
 const app = express()
-let indexHTML // generated by html-webpack-plugin
+let template // generated by html-webpack-plugin
 let renderer  // created from the webpack-generated server bundle
 if (isProd) {
  // in production: create server renderer and index HTML from real fs
-  renderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js'), 'utf-8'))
+  renderer = createRenderer(require('./dist/vue-ssr-bundle.json'), 'utf-8')
-  indexHTML = parseIndex(fs.readFileSync(resolve('./dist/index.html'), 'utf-8'))
+  template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
 } else {
  // in development: setup the dev server with watch and hot-reload,
  // and update renderer / index HTML on file change.
@@ -26,8 +26,8 @@ if (isProd) {
    bundleUpdated: bundle => {
      renderer = createRenderer(bundle)
    },
-    indexUpdated: index => {
+    templateUpdated: _template => {
-      indexHTML = parseIndex(index)
+      template = _template
    }
  })
 }
@@ -42,69 +42,46 @@ function createRenderer (bundle) {
  })
 }
-function parseIndex (template) {
-  const contentMarker = '<!-- APP -->'
-  const i = template.indexOf(contentMarker)
-  return {
-    head: template.slice(0, i),
-    tail: template.slice(i + contentMarker.length)
-  }
-}
 const serve = (path, cache) => express.static(resolve(path), {
  maxAge: cache && isProd ? 60 * 60 * 24 * 30 : 0
 })
 app.use(compression({ threshold: 0 }))
 app.use(favicon('./public/logo-48.png'))
-app.use('/service-worker.js', serve('./dist/service-worker.js'))
-app.use('/manifest.json', serve('./manifest.json'))
 app.use('/dist', serve('./dist'))
 app.use('/public', serve('./public'))
+app.use('/manifest.json', serve('./manifest.json'))
+app.use('/service-worker.js', serve('./dist/service-worker.js'))
 app.get('*', (req, res) => {
  if (!renderer) {
    return res.end('waiting for compilation... refresh in a moment.')
  }
+  const s = Date.now()
  res.setHeader("Content-Type", "text/html")
  res.setHeader("Server", serverInfo)
-  var s = Date.now()
+  const errorHandler = err => {
-  const context = { url: req.url }
+    if (err && err.code === 404) {
-  const renderStream = renderer.renderToStream(context)
-  renderStream.once('data', () => {
-    res.write(indexHTML.head)
-  })
-  renderStream.on('data', chunk => {
-    res.write(chunk)
-  })
-  renderStream.on('end', () => {
-    // embed initial store state
-    if (context.initialState) {
-      res.write(
-        `<script>window.__INITIAL_STATE__=${
-          serialize(context.initialState, { isJSON: true })
-        }</script>`
-      )
-    }
-    res.end(indexHTML.tail)
-    console.log(`whole request: ${Date.now() - s}ms`)
-  })
-  renderStream.on('error', err => {
-    if (err && err.code === '404') {
      res.status(404).end('404 | Page Not Found')
-      return
+    } else {
-    }
      // Render Error Page or Redirect
      res.status(500).end('Internal Error 500')
      console.error(`error during render : ${req.url}`)
      console.error(err)
-  })
+    }
+  }
+  const context = { url: req.url }
+  const htmlStream = new HTMLStream({ template, context })
+  renderer.renderToStream(context)
+    .on('error', errorHandler)
+    .pipe(htmlStream)
+    .on('end', () => console.log(`whole request: ${Date.now() - s}ms`))
+    .pipe(res)
 })
 const port = process.env.PORT || 8080

--- a/src/client-entry.js
+++ b/src/client-entry.js
 import 'es6-promise/auto'
-import { app, store } from './app'
+import { app, store, router } from './app'
 // prime the store with server-initialized state.
 // the state is determined during SSR and inlined in the page markup.
 store.replaceState(window.__INITIAL_STATE__)
-// actually mount to DOM
+// wait until router has resolved all async before hooks
-app.$mount('#app')
+// and async components...
+router.onReady(() => {
+  // actually mount to DOM
+  app.$mount('#app')
+})
 // service worker
 if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {

--- a/src/server-entry.js
+++ b/src/server-entry.js
@@ -10,23 +10,23 @@ const isDev = process.env.NODE_ENV !== 'production'
 export default context => {
  const s = isDev && Date.now()
+  return new Promise((resolve, reject) => {
    // set router's location
    router.push(context.url)
-  const matchedComponents = router.getMatchedComponents()
+    // wait until router has resolved possible async hooks
+    router.onReady(() => {
+      const matchedComponents = router.getMatchedComponents()
      // no matched routes
      if (!matchedComponents.length) {
-    return Promise.reject({ code: '404' })
+        reject({ code: 404 })
      }
      // Call preFetch hooks on components matched by the route.
      // A preFetch hook dispatches a store action and returns a Promise,
      // which is resolved when the action is complete and store state has been
      // updated.
-  return Promise.all(matchedComponents.map(component => {
+      Promise.all(matchedComponents.map(component => {
-    if (component.preFetch) {
+        return component.preFetch && component.preFetch(store)
-      return component.preFetch(store)
-    }
      })).then(() => {
        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
        // After all preFetch hooks are resolved, our store is now
@@ -35,7 +35,9 @@ export default context => {
        // inline the state in the HTML response. This allows the client-side
        // store to pick-up the server-side state without having to duplicate
        // the initial data fetching on the client.
-    context.initialState = store.state
+        context.state = store.state
-    return app
+        resolve(app)
+      }).catch(reject)
+    })
  })
 }
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,9 +3,22 @@ import Router from 'vue-router'
 Vue.use(Router)
-import { createListView } from '../views/CreateListView'
+// We are using Webpack code splitting here so that each route's associated
-import ItemView from '../views/ItemView.vue'
+// component code is loaded on-demand only when the route is visited.
-import UserView from '../views/UserView.vue'
+// It's actually not really necessary for a small project of this size but
+// the goal is to demonstrate how to do it.
+//
+// Note that the dynamic import syntax should actually be just `import()`
+// but buble/acorn doesn't support parsing that syntax until it's stage 4
+// so we use the old System.import here instead.
+//
+// If using Babel, `import()` can be supported via
+// babel-plugin-syntax-dynamic-import.
+const createListView = name => () =>
+  System.import('../views/CreateListView').then(m => m.createListView(name))
+const ItemView = () => System.import('../views/ItemView.vue')
+const UserView = () => System.import('../views/UserView.vue')
 export default new Router({
  mode: 'history',

--- a/yarn.lock
+++ b/yarn.lock
@@ -40,12 +40,12 @@ acorn@^4.0.3, acorn@^4.0.4:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
 ajv-keywords@^1.1.1:
-  version "1.5.0"
+  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.0.tgz#c11e6859eafff83e0dafc416929472eca946aa2c"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 ajv@^4.7.0:
-  version "4.10.4"
+  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.4.tgz#c0974dd00b3464984892d6010aa9c2c945933254"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.2.tgz#f166c3c11cbc6cb9dcc102a5bcfe5b72c95287e6"
  dependencies:
    co "^4.6.0"
    json-stable-stringify "^1.0.1"
@@ -183,14 +183,14 @@ asynckit@^0.4.0:
  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 autoprefixer@^6.3.1, autoprefixer@^6.5.3:
-  version "6.6.1"
+  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.1.tgz#11a4077abb4b313253ec2f6e1adb91ad84253519"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.1.tgz#d14d0842f6ef90741cfb2b1e8152a04e83b39ed2"
  dependencies:
-    browserslist "~1.5.1"
+    browserslist "^1.7.1"
-    caniuse-db "^1.0.30000604"
+    caniuse-db "^1.0.30000617"
    normalize-range "^0.1.2"
    num2fraction "^1.2.2"
-    postcss "^5.2.8"
+    postcss "^5.2.11"
    postcss-value-parser "^3.2.3"
 aws-sign2@~0.6.0:
@@ -329,11 +329,12 @@ browserify-zlib@^0.1.4:
  dependencies:
    pako "~0.2.0"
-browserslist@^1.0.1, browserslist@^1.5.2, browserslist@~1.5.1:
+browserslist@^1.0.1, browserslist@^1.5.2, browserslist@^1.7.1:
-  version "1.5.2"
+  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.2.tgz#1c82fde0ee8693e6d15c49b7bff209dc06298c56"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.1.tgz#cc9bd193979a2a4b09fdb3df6003fefe48ccefe1"
  dependencies:
-    caniuse-db "^1.0.30000604"
+    caniuse-db "^1.0.30000617"
+    electron-to-chromium "^1.2.1"
 buble-loader@^0.4.0:
  version "0.4.0"
@@ -423,9 +424,9 @@ caniuse-api@^1.5.2:
    lodash.uniq "^4.3.0"
    shelljs "^0.7.0"
-caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000604:
+caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000617:
-  version "1.0.30000613"
+  version "1.0.30000617"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000613.tgz#639133b7a5380c1416f9701d23d54d093dd68299"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000617.tgz#9b7fd81f58a35526315c83e60cb5f076f0beb392"
 caseless@~0.11.0:
  version "0.11.0"
@@ -475,12 +476,11 @@ clap@^1.0.9:
  dependencies:
    chalk "^1.1.3"
-clean-css@3.4.x:
+clean-css@4.0.x:
-  version "3.4.23"
+  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.23.tgz#604fbbca24c12feb59b02f00b84f1fb7ded6d001"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.3.tgz#9da7b59301d940c345757f175e6dfa6872c7de8e"
  dependencies:
-    commander "2.8.x"
+    source-map "0.5.x"
-    source-map "0.4.x"
 cliui@^2.1.0:
  version "2.1.0"
@@ -558,12 +558,6 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
  dependencies:
    delayed-stream "~1.0.0"
-commander@2.8.x:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
 commander@2.9.x, commander@^2.9.0:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
@@ -618,9 +612,9 @@ constants-browserify@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-content-disposition@0.5.1:
+content-disposition@0.5.2:
-  version "0.5.1"
+  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
 content-type@~1.0.2:
  version "1.0.2"
@@ -790,9 +784,9 @@ cssesc@^0.1.0:
    postcss-value-parser "^3.2.3"
    postcss-zindex "^2.0.1"
-csso@~2.2.1:
+csso@~2.3.1:
-  version "2.2.1"
+  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-2.2.1.tgz#51fbb5347e50e81e6ed51668a48490ae6fe2afe2"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.1.tgz#4f8d91a156f2f1c2aebb40b8fb1b5eb83d94d3b9"
  dependencies:
    clap "^1.0.9"
    source-map "^0.5.3"
@@ -958,6 +952,10 @@ ee-first@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+electron-to-chromium@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.2.1.tgz#63ac7579a1c5bedb296c8607621f2efc9a54b968"
 elliptic@^6.0.0:
  version "6.3.2"
  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.3.2.tgz#e4c81e0829cf0a65ab70e998b8232723b5c1bc48"
@@ -1047,12 +1045,12 @@ expand-range@^1.8.1:
    fill-range "^2.1.0"
 express@^4.14.0:
-  version "4.14.0"
+  version "4.14.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.14.1.tgz#646c237f766f148c2120aff073817b9e4d7e0d33"
  dependencies:
    accepts "~1.3.3"
    array-flatten "1.1.1"
-    content-disposition "0.5.1"
+    content-disposition "0.5.2"
    content-type "~1.0.2"
    cookie "0.3.1"
    cookie-signature "1.0.6"
@@ -1061,19 +1059,19 @@ express@^4.14.0:
    encodeurl "~1.0.1"
    escape-html "~1.0.3"
    etag "~1.7.0"
-    finalhandler "0.5.0"
+    finalhandler "0.5.1"
    fresh "0.3.0"
    merge-descriptors "1.0.1"
    methods "~1.1.2"
    on-finished "~2.3.0"
    parseurl "~1.3.1"
    path-to-regexp "0.1.7"
-    proxy-addr "~1.1.2"
+    proxy-addr "~1.1.3"
    qs "6.2.0"
    range-parser "~1.2.0"
-    send "0.14.1"
+    send "0.14.2"
-    serve-static "~1.11.1"
+    serve-static "~1.11.2"
-    type-is "~1.6.13"
+    type-is "~1.6.14"
    utils-merge "1.0.0"
    vary "~1.1.0"
@@ -1087,14 +1085,6 @@ extglob@^0.3.1:
  dependencies:
    is-extglob "^1.0.0"
-extract-text-webpack-plugin@^2.0.0-beta.3:
-  version "2.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0-beta.5.tgz#595e32ae2466ad2129a928328485fcc064ce57f0"
-  dependencies:
-    async "^2.1.2"
-    loader-utils "^0.2.3"
-    webpack-sources "^0.1.0"
 extsprintf@1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
@@ -1129,14 +1119,14 @@ fill-range@^2.1.0:
    repeat-element "^1.1.2"
    repeat-string "^1.5.2"
-finalhandler@0.5.0:
+finalhandler@0.5.1:
-  version "0.5.0"
+  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.1.tgz#2c400d8d4530935bc232549c5fa385ec07de6fcd"
  dependencies:
    debug "~2.2.0"
    escape-html "~1.0.3"
    on-finished "~2.3.0"
-    statuses "~1.3.0"
+    statuses "~1.3.1"
    unpipe "~1.0.0"
 find-up@^1.0.0:
@@ -1147,8 +1137,8 @@ find-up@^1.0.0:
    pinkie-promise "^2.0.0"
 firebase@^3.6.2:
-  version "3.6.6"
+  version "3.6.7"
-  resolved "https://registry.yarnpkg.com/firebase/-/firebase-3.6.6.tgz#3062036e6f47e78a23f300cd168eda1bc02a5908"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-3.6.7.tgz#7708dc6ddaa313415bbc5213116c597b21567ab2"
  dependencies:
    dom-storage "2.0.2"
    faye-websocket "0.9.3"
@@ -1363,8 +1353,8 @@ hawk@~3.1.3:
    sntp "1.x.x"
 he@1.1.x, he@^1.1.0:
-  version "1.1.0"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 hoek@2.x.x:
  version "2.16.3"
@@ -1383,11 +1373,11 @@ html-entities@^1.2.0:
  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.0.tgz#41948caf85ce82fed36e4e6a0ed371a6664379e2"
 html-minifier@^3.2.3:
-  version "3.2.3"
+  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.2.3.tgz#d2ff536e24d95726c332493d8f77d84dbed85372"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.3.0.tgz#a9b5b8eda501362d4c5699db02a8dc72013d1fab"
  dependencies:
    camel-case "3.0.x"
-    clean-css "3.4.x"
+    clean-css "4.0.x"
    commander "2.9.x"
    he "1.1.x"
    ncname "1.0.x"
@@ -1396,8 +1386,8 @@ html-minifier@^3.2.3:
    uglify-js "2.7.x"
 html-webpack-plugin@^2.24.1:
-  version "2.26.0"
+  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.26.0.tgz#ba97c8a66f912b85df80d2aeea65966c8bd9249e"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.28.0.tgz#2e7863b57e5fd48fe263303e2ffc934c3064d009"
  dependencies:
    bluebird "^3.4.7"
    html-minifier "^3.2.3"
@@ -1415,7 +1405,7 @@ htmlparser2@~3.3.0:
    domutils "1.1"
    readable-stream "1.0"
-http-errors@~1.5.0:
+http-errors@~1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
  dependencies:
@@ -1667,9 +1657,9 @@ js-tokens@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"
-js-yaml@~3.6.1:
+js-yaml@~3.7.0:
-  version "3.6.1"
+  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
  dependencies:
    argparse "^1.0.7"
    esprima "^2.6.0"
@@ -1774,10 +1764,10 @@ load-json-file@^1.0.0:
    strip-bom "^2.0.0"
 loader-runner@^2.2.0:
-  version "2.2.0"
+  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.2.0.tgz#824c1b699c4e7a2b6501b85902d5b862bf45b3fa"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
-loader-utils@0.2.x, loader-utils@^0.2.10, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.7, loader-utils@^0.2.9, loader-utils@~0.2.2, loader-utils@~0.2.5:
+loader-utils@0.2.x, loader-utils@^0.2.10, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.7, loader-utils@^0.2.9, loader-utils@~0.2.2, loader-utils@~0.2.5:
  version "0.2.16"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
  dependencies:
@@ -1874,8 +1864,8 @@ map-obj@^1.0.0, map-obj@^1.0.1:
  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 math-expression-evaluator@^1.2.14:
-  version "1.2.14"
+  version "1.2.15"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.15.tgz#38dc5f0194c5bf5ff1c690ad4c4b64df71ac0187"
  dependencies:
    lodash.indexof "^4.0.5"
@@ -1993,8 +1983,8 @@ ms@0.7.2, ms@^0.7.1:
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 nan@^2.3.0:
-  version "2.5.0"
+  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
 ncname@1.0.x:
  version "1.0.0"
@@ -2113,7 +2103,7 @@ oauth-sign@~0.8.1:
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
-object-assign@^4.0.0, object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4.0.1, object-assign@^4.1.0:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -2484,14 +2474,14 @@ postcss-zindex@^2.0.1:
    postcss "^5.0.4"
    uniqs "^2.0.0"
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.8:
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.11:
-  version "5.2.10"
+  version "5.2.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.10.tgz#b58b64e04f66f838b7bc7cb41f7dac168568a945"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.11.tgz#ff29bcd6d2efb98bfe08a022055ec599bbe7b761"
  dependencies:
    chalk "^1.1.3"
    js-base64 "^2.1.9"
    source-map "^0.5.6"
-    supports-color "^3.1.2"
+    supports-color "^3.2.3"
 prepend-http@^1.0.0:
  version "1.0.4"
@@ -2526,7 +2516,7 @@ proto-list@~1.2.1:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
-proxy-addr@~1.1.2:
+proxy-addr@~1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.3.tgz#dc97502f5722e888467b3fa2297a7b1ff47df074"
  dependencies:
@@ -2824,9 +2814,9 @@ sax@~1.2.1:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
-send@0.14.1:
+send@0.14.2:
-  version "0.14.1"
+  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.14.2.tgz#39b0438b3f510be5dc6f667a11f71689368cdeef"
  dependencies:
    debug "~2.2.0"
    depd "~1.1.0"
@@ -2835,12 +2825,12 @@ send@0.14.1:
    escape-html "~1.0.3"
    etag "~1.7.0"
    fresh "0.3.0"
-    http-errors "~1.5.0"
+    http-errors "~1.5.1"
    mime "1.3.4"
-    ms "0.7.1"
+    ms "0.7.2"
    on-finished "~2.3.0"
    range-parser "~1.2.0"
-    statuses "~1.3.0"
+    statuses "~1.3.1"
 serialize-javascript@^1.3.0:
  version "1.3.0"
@@ -2855,14 +2845,14 @@ serve-favicon@^2.3.2:
    ms "0.7.2"
    parseurl "~1.3.1"
-serve-static@~1.11.1:
+serve-static@~1.11.2:
-  version "1.11.1"
+  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.2.tgz#2cf9889bd4435a320cc36895c9aa57bd662e6ac7"
  dependencies:
    encodeurl "~1.0.1"
    escape-html "~1.0.3"
    parseurl "~1.3.1"
-    send "0.14.1"
+    send "0.14.2"
 serviceworker-cache-polyfill@^4.0.0:
  version "4.0.0"
@@ -2928,13 +2918,7 @@ source-map@0.1.x:
  dependencies:
    amdefine ">=0.0.4"
-source-map@0.4.x:
+source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
@@ -2971,7 +2955,7 @@ sshpk@^1.7.0:
    jsbn "~0.1.0"
    tweetnacl "~0.14.0"
-"statuses@>= 1.3.1 < 2", statuses@~1.3.0:
+"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
@@ -3060,20 +3044,20 @@ supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-supports-color@^3.1.0, supports-color@^3.1.2:
+supports-color@^3.1.0, supports-color@^3.2.3:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
  dependencies:
    has-flag "^1.0.0"
 svgo@^0.7.0:
-  version "0.7.1"
+  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
  dependencies:
    coa "~1.0.1"
    colors "~1.1.2"
-    csso "~2.2.1"
+    csso "~2.3.1"
-    js-yaml "~3.6.1"
+    js-yaml "~3.7.0"
    mkdirp "~0.5.1"
    sax "~1.2.1"
    whet.extend "~0.9.9"
@@ -3148,8 +3132,8 @@ topo@1.x.x:
    hoek "2.x.x"
 toposort@^1.0.0:
-  version "1.0.0"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.2.tgz#be1de72431320fcefe35a7b539c1c336cbcfd32c"
 tough-cookie@~2.3.0:
  version "2.3.2"
@@ -3173,7 +3157,7 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
  version "0.14.5"
  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-type-is@~1.6.13:
+type-is@~1.6.14:
  version "1.6.14"
  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.14.tgz#e219639c17ded1ca0789092dd54a03826b817cb2"
  dependencies:
@@ -3220,8 +3204,8 @@ upper-case@^1.1.1:
  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
 urijs@^1.16.1:
-  version "1.18.4"
+  version "1.18.5"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.18.4.tgz#0c97a17a0b0e4a2e635a565c2f16c0f180605e28"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.18.5.tgz#d709e2238c549f65230f4fc3535806a589689ac5"
 url-loader@^0.5.7:
  version "0.5.7"
@@ -3295,41 +3279,51 @@ vm-browserify@0.0.4:
    indexof "0.0.1"
 vue-hot-reload-api@^2.0.1:
-  version "2.0.7"
+  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.7.tgz#45bd46cfeee7fd22550b467a76fa0c4a0ceae51b"
+  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.8.tgz#b3ba6a9a443d561b14f2785c8ea056618cb2faa3"
-vue-loader@^10.0.2:
+vue-loader@^10.2.0:
-  version "10.0.2"
+  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-10.0.2.tgz#6fe7bcefb32c5439bd0338464aa22673ad62299c"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-10.2.0.tgz#6287b24d02fe68c6b7523820e4ef636ff07d6f2b"
  dependencies:
    consolidate "^0.14.0"
    hash-sum "^1.0.2"
    js-beautify "^1.6.3"
    loader-utils "^0.2.10"
    lru-cache "^4.0.1"
-    object-assign "^4.0.0"
    postcss "^5.0.10"
    postcss-selector-parser "^2.0.0"
    source-map "^0.5.6"
    vue-hot-reload-api "^2.0.1"
-    vue-style-loader "^1.0.0"
+    vue-style-loader "^2.0.0"
    vue-template-es2015-compiler "^1.2.2"
 vue-router@^2.1.0:
-  version "2.1.3"
+  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.1.3.tgz#562b492761961a8efb247ce622b16ddd857b8d14"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.2.0.tgz#65a29ce23d718ddf09237938a58a01b3d1acc77c"
-vue-server-renderer@^2.1.8:
+vue-server-renderer@^2.1.10:
  version "2.1.10"
  resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.1.10.tgz#b88b75c7a004a9be70fecc1a6b86be7d0082c165"
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"
-vue-style-loader@^1.0.0:
+vue-ssr-html-stream@^1.0.0:
  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-1.0.0.tgz#abeb7bd0f46313083741244d3079d4f14449e049"
+  resolved "https://registry.yarnpkg.com/vue-ssr-html-stream/-/vue-ssr-html-stream-1.0.0.tgz#b6b5d18bfcb0068806da6e3fbb2ff183bcd0f359"
+  dependencies:
+    serialize-javascript "^1.3.0"
+vue-ssr-webpack-plugin@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-ssr-webpack-plugin/-/vue-ssr-webpack-plugin-1.0.0.tgz#00b35a6b7d23689c65c1af838ef416b0a772b8f5"
+vue-style-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-2.0.0.tgz#1a3bb55239ac541ee3af0301d66f16fc86786543"
  dependencies:
+    hash-sum "^1.0.2"
    loader-utils "^0.2.7"
 vue-template-compiler@^2.1.8:
@@ -3343,13 +3337,13 @@ vue-template-es2015-compiler@^1.2.2:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.5.0.tgz#e4f672ab1718a3abf9171a080daefac31be117e1"
-vue@^2.1.8:
+vue@^2.1.10:
  version "2.1.10"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.1.10.tgz#c9235ca48c7925137be5807832ac4e3ac180427b"
 vuex-router-sync@^4.0.2:
-  version "4.1.1"
+  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-4.1.1.tgz#536e6f39ccc56aedc90a4b92e4bcc29eb0cb80ce"
+  resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-4.1.2.tgz#584d6315909257adec2914a63d54b428c016b8ec"
 vuex@^2.1.0:
  version "2.1.1"
@@ -3373,22 +3367,22 @@ webpack-dev-middleware@^1.8.4:
    range-parser "^1.0.3"
 webpack-hot-middleware@^2.13.2:
-  version "2.15.0"
+  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.15.0.tgz#71995af7c0025f109df482f86f1e10379526d026"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.16.1.tgz#ae209bcab2b9b672f1b0fdcf6c5c2a680ff118e1"
  dependencies:
    ansi-html "0.0.6"
    html-entities "^1.2.0"
    querystring "^0.2.0"
    strip-ansi "^3.0.0"
-webpack-sources@^0.1.0, webpack-sources@^0.1.4:
+webpack-sources@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.4.tgz#ccc2c817e08e5fa393239412690bb481821393cd"
  dependencies:
    source-list-map "~0.1.7"
    source-map "~0.5.3"
-webpack@*, webpack@^2.2.0-rc.3:
+webpack@*, webpack@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.0.tgz#09246336b5581c9002353f75bcadb598a648f977"
  dependencies: