update to use vue 2.2.4

README.md

@@ -18,6 +18,7 @@ HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side render
   - Vue + vue-router + vuex working together
   - Server-side data pre-fetching
   - Client-side state & DOM hydration
+  - Automatically inlines CSS used by rendered components only
 - Single-file Vue Components
   - Hot-reload in development
   - CSS extraction for production

build/setup-dev-server.js

@@ -4,7 +4,10 @@ const MFS = require('memory-fs')
 const clientConfig = require('./webpack.client.config')
 const serverConfig = require('./webpack.server.config')
 
-module.exports = function setupDevServer (app, opts) {
+module.exports = function setupDevServer (app, cb) {
+  let bundle
+  let template
+
   // modify client config to work with hot middleware
   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
   clientConfig.output.filename = '[name].js'
@@ -27,8 +30,10 @@ module.exports = function setupDevServer (app, opts) {
     const fs = devMiddleware.fileSystem
     const filePath = path.join(clientConfig.output.path, 'index.html')
     if (fs.existsSync(filePath)) {
-      const index = fs.readFileSync(filePath, 'utf-8')
-      opts.templateUpdated(index)
+      template = fs.readFileSync(filePath, 'utf-8')
+      if (bundle) {
+        cb(bundle, template)
+      }
     }
   })
 
@@ -47,6 +52,9 @@ module.exports = function setupDevServer (app, opts) {
 
     // 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')))
+    bundle = JSON.parse(mfs.readFileSync(bundlePath, 'utf-8'))
+    if (template) {
+      cb(bundle, template)
+    }
   })
 }

package.json

@@ -16,37 +16,36 @@
   },
   "dependencies": {
     "compression": "^1.6.2",
-    "cross-env": "^3.1.3",
-    "es6-promise": "^4.0.5",
-    "express": "^4.14.0",
-    "firebase": "^3.6.2",
+    "cross-env": "^3.2.4",
+    "es6-promise": "^4.1.0",
+    "express": "^4.15.2",
+    "firebase": "^3.7.2",
     "lru-cache": "^4.0.2",
     "serialize-javascript": "^1.3.0",
-    "serve-favicon": "^2.3.2",
-    "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"
+    "serve-favicon": "^2.4.1",
+    "vue": "^2.2.4",
+    "vue-router": "^2.3.0",
+    "vue-server-renderer": "^2.2.4",
+    "vuex": "^2.2.1",
+    "vuex-router-sync": "^4.1.2"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.3",
-    "buble": "^0.15.1",
-    "buble-loader": "^0.4.0",
-    "css-loader": "^0.26.0",
-    "file-loader": "^0.9.0",
-    "html-webpack-plugin": "^2.24.1",
-    "rimraf": "^2.5.4",
+    "autoprefixer": "^6.7.7",
+    "buble": "^0.15.2",
+    "buble-loader": "^0.4.1",
+    "css-loader": "^0.27.3",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "rimraf": "^2.6.1",
     "stylus": "^0.54.5",
-    "stylus-loader": "^2.4.0",
-    "sw-precache-webpack-plugin": "^0.7.0",
-    "url-loader": "^0.5.7",
-    "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",
-    "webpack-hot-middleware": "^2.13.2"
+    "stylus-loader": "^3.0.1",
+    "sw-precache-webpack-plugin": "^0.9.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^11.1.4",
+    "vue-ssr-webpack-plugin": "^1.0.2",
+    "vue-template-compiler": "^2.2.4",
+    "webpack": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.1"
   }
 }

server.js

@@ -3,7 +3,6 @@ const path = require('path')
 const express = require('express')
 const favicon = require('serve-favicon')
 const compression = require('compression')
-const HTMLStream = require('vue-ssr-html-stream')
 const resolve = file => path.resolve(__dirname, file)
 
 const isProd = process.env.NODE_ENV === 'production'
@@ -13,28 +12,28 @@ const serverInfo =
 
 const app = express()
 
-let template // generated by html-webpack-plugin
-let renderer  // created from the webpack-generated server bundle
+let renderer
 if (isProd) {
-  // in production: create server renderer and index HTML from real fs
-  renderer = createRenderer(require('./dist/vue-ssr-bundle.json'))
-  template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
+  // In production: create server renderer using server bundle and index HTML
+  // template from real fs.
+  // The server bundle is generated by vue-ssr-webpack-plugin.
+  const bundle = require('./dist/vue-ssr-bundle.json')
+  // src/index.template.html is processed by html-webpack-plugin to inject
+  // build assets and output as dist/index.html.
+  const template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
+  renderer = createRenderer(bundle, template)
 } else {
-  // in development: setup the dev server with watch and hot-reload,
-  // and update renderer / index HTML on file change.
-  require('./build/setup-dev-server')(app, {
-    bundleUpdated: bundle => {
-      renderer = createRenderer(bundle)
-    },
-    templateUpdated: _template => {
-      template = _template
-    }
+  // In development: setup the dev server with watch and hot-reload,
+  // and create a new renderer on bundle / index template update.
+  require('./build/setup-dev-server')(app, (bundle, template) => {
+    renderer = createRenderer(bundle, template)
   })
 }
 
-function createRenderer (bundle) {
+function createRenderer (bundle, template) {
   // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
   return require('vue-server-renderer').createBundleRenderer(bundle, {
+    template,
     cache: require('lru-cache')({
       max: 1000,
       maxAge: 1000 * 60 * 15
@@ -68,18 +67,14 @@ app.get('*', (req, res) => {
       res.status(404).end('404 | Page Not Found')
     } else {
       // Render Error Page or Redirect
-      res.status(500).end('Internal Error 500')
+      res.status(500).end('500 | Internal Server Error')
       console.error(`error during render : ${req.url}`)
       console.error(err)
     }
   }
 
-  const context = { url: req.url }
-  const htmlStream = new HTMLStream({ template, context })
-
-  renderer.renderToStream(context)
+  renderer.renderToStream({ url: req.url })
     .on('error', errorHandler)
-    .pipe(htmlStream)
     .on('end', () => console.log(`whole request: ${Date.now() - s}ms`))
     .pipe(res)
 })

src/index.template.html

@@ -17,6 +17,6 @@
     <% } %>
   </head>
   <body>
-    <!-- APP -->
+    <!--vue-ssr-outlet-->
   </body>
 </html>