feat: watch and update template in dev

Author: yyx990803

Diff for: build/setup-dev-server.js

@@ -1,6 +1,8 @@
+const fs = require('fs')
 const path = require('path')
-const webpack = require('webpack')
 const MFS = require('memory-fs')
+const webpack = require('webpack')
+const chokidar = require('chokidar')
 const clientConfig = require('./webpack.client.config')
 const serverConfig = require('./webpack.server.config')
 
@@ -10,15 +12,31 @@ const readFile = (fs, file) => {
   } catch (e) {}
 }
 
-module.exports = function setupDevServer (app, cb) {
-  let bundle, clientManifest
-  let resolve
-  const readyPromise = new Promise(r => { resolve = r })
-  const ready = (...args) => {
-    resolve()
-    cb(...args)
+module.exports = function setupDevServer (app, templatePath, cb) {
+  let bundle
+  let template
+  let clientManifest
+
+  let ready
+  const readyPromise = new Promise(r => { ready = r })
+  const update = () => {
+    if (bundle && clientManifest) {
+      ready()
+      cb(bundle, {
+        template,
+        clientManifest
+      })
+    }
   }
 
+  // read template from disk and watch
+  template = fs.readFileSync(templatePath, 'utf-8')
+  chokidar.watch(templatePath).on('change', () => {
+    template = fs.readFileSync(templatePath, 'utf-8')
+    console.log('index.html template updated.')
+    update()
+  })
+
   // modify client config to work with hot middleware
   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
   clientConfig.output.filename = '[name].js'
@@ -39,16 +57,11 @@ module.exports = function setupDevServer (app, cb) {
     stats.errors.forEach(err => console.error(err))
     stats.warnings.forEach(err => console.warn(err))
     if (stats.errors.length) return
-
     clientManifest = JSON.parse(readFile(
       devMiddleware.fileSystem,
       'vue-ssr-client-manifest.json'
     ))
-    if (bundle) {
-      ready(bundle, {
-        clientManifest
-      })
-    }
+    update()
   })
 
   // hot middleware
@@ -65,11 +78,7 @@ module.exports = function setupDevServer (app, cb) {
 
     // read bundle generated by vue-ssr-webpack-plugin
     bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
-    if (clientManifest) {
-      ready(bundle, {
-        clientManifest
-      })
-    }
+    update()
   })
 
   return readyPromise

Diff for: package.json

@@ -36,6 +36,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-env": "^1.6.0",
+    "chokidar": "^1.7.0",
     "css-loader": "^0.28.7",
     "file-loader": "^0.11.2",
     "friendly-errors-webpack-plugin": "^1.6.1",

Diff for: server.js

@@ -16,12 +16,9 @@ const serverInfo =
 
 const app = express()
 
-const template = fs.readFileSync(resolve('./src/index.template.html'), 'utf-8')
-
 function createRenderer (bundle, options) {
   // https://github.com/vuejs/vue/blob/dev/packages/vue-server-renderer/README.md#why-use-bundlerenderer
   return createBundleRenderer(bundle, Object.assign(options, {
-    template,
     // for component caching
     cache: LRU({
       max: 1000,
@@ -36,23 +33,30 @@ function createRenderer (bundle, options) {
 
 let renderer
 let readyPromise
+const templatePath = resolve('./src/index.template.html')
 if (isProd) {
-  // In production: create server renderer using built server bundle.
+  // In production: create server renderer using template and built server bundle.
   // The server bundle is generated by vue-ssr-webpack-plugin.
+  const template = fs.readFileSync(templatePath, 'utf-8')
   const bundle = require('./dist/vue-ssr-server-bundle.json')
   // The client manifests are optional, but it allows the renderer
   // to automatically infer preload/prefetch links and directly add <script>
   // tags for any async chunks used during render, avoiding waterfall requests.
   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
   renderer = createRenderer(bundle, {
+    template,
     clientManifest
   })
 } else {
   // In development: setup the dev server with watch and hot-reload,
   // and create a new renderer on bundle / index template update.
-  readyPromise = require('./build/setup-dev-server')(app, (bundle, options) => {
-    renderer = createRenderer(bundle, options)
-  })
+  readyPromise = require('./build/setup-dev-server')(
+    app,
+    templatePath,
+    (bundle, options) => {
+      renderer = createRenderer(bundle, options)
+    }
+  )
 }
 
 const serve = (path, cache) => express.static(resolve(path), {