improve dev server startup

build/setup-dev-server.js

@@ -6,6 +6,13 @@ const serverConfig = require('./webpack.server.config')
 
 module.exports = function setupDevServer (app, cb) {
   let bundle, clientManifest
+  let resolve
+  let resolved = false
+  const readyPromise = new Promise(r => { resolve = r })
+  const ready = (...args) => {
+    if (!resolved) resolve()
+    cb(...args)
+  }
 
   // modify client config to work with hot middleware
   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
@@ -27,7 +34,7 @@ module.exports = function setupDevServer (app, cb) {
     const readFile = file => fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
     clientManifest = JSON.parse(readFile('vue-ssr-client-manifest.json'))
     if (bundle) {
-      cb(bundle, {
+      ready(bundle, {
         clientManifest
       })
     }
@@ -50,9 +57,11 @@ module.exports = function setupDevServer (app, cb) {
     // read bundle generated by vue-ssr-webpack-plugin
     bundle = JSON.parse(readFile('vue-ssr-server-bundle.json'))
     if (clientManifest) {
-      cb(bundle, {
+      ready(bundle, {
         clientManifest
       })
     }
   })
+
+  return readyPromise
 }

server.js

@@ -34,7 +34,7 @@ function createRenderer (bundle, options) {
 }
 
 let renderer
-
+let readyPromise
 if (isProd) {
   // In production: create server renderer using built server bundle.
   // The server bundle is generated by vue-ssr-webpack-plugin.
@@ -49,7 +49,7 @@ if (isProd) {
 } else {
   // 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, options) => {
+  readyPromise = require('./build/setup-dev-server')(app, (bundle, options) => {
     renderer = createRenderer(bundle, options)
   })
 }
@@ -78,11 +78,7 @@ const microCache = LRU({
 // headers.
 const isCacheable = req => useMicroCache
 
-app.get('*', (req, res) => {
-  if (!renderer) {
-    return res.end('waiting for compilation... refresh in a moment.')
-  }
-
+function render (req, res) {
   const s = Date.now()
 
   res.setHeader("Content-Type", "text/html")
@@ -122,6 +118,10 @@ app.get('*', (req, res) => {
       console.log(`whole request: ${Date.now() - s}ms`)
     }
   })
+}
+
+app.get('*', isProd ? render : (req, res) => {
+  readyPromise.then(() => render(req, res))
 })
 
 const port = process.env.PORT || 8080