script.dev.ssr.js

process.env.NODE_ENV = 'development'
process.env.QUASAR_SSR = true

const
  fs = require('fs'),
  path = require('path'),
  webpack = require('webpack'),
  LRU = require('lru-cache'),
  express = require('express'),
  { createBundleRenderer } = require('vue-server-renderer'),
  MFS = require('memory-fs'),
  chokidar = require('chokidar')

const
  clientConfig = require('./webpack.ssr.client'),
  serverConfig = require('./webpack.ssr.server'),
  env = require('./env'),
  resolve = file => path.resolve(__dirname, '..', file),
  serverInfo =
    `express/${require('express/package.json').version} ` +
    `vue-server-renderer/${require('vue-server-renderer/package.json').version}`,
  app = express(),
  templatePath = resolve('dev/ssr.index.html')

console.log()
console.log(` ☕️ Preparing for Quasar v${env.quasarVersion} on SSR`)
console.log()
console.log(` 🚀 Starting SSR dev server with ${env.theme.toUpperCase()} theme...`)
console.log(`    Will listen at ${env.uri}`)
console.log(`    Browser will open when build is ready.`)

const readFile = (fs, file) => {
  try {
    return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
  }
  catch (e) {}
}

function showBanner () {
  console.log(`\n 🍺 Running SSR with Quasar v${env.quasarVersion} at ${env.uri}\n`)
}

function setupDevServer (app, templatePath, cb) {
  let clientManifest, bundle, ready
  let clientReady, serverReady
  let template = fs.readFileSync(templatePath, 'utf-8')
  const
    clientPromise = new Promise((resolve, reject) => { clientReady = resolve }),
    serverPromise = new Promise((resolve, reject) => { serverReady = resolve })

  chokidar.watch(templatePath).on('change', () => {
    template = fs.readFileSync(templatePath, 'utf-8')
    console.log(' 🖖 ssr.index.html template updated')
    update()
  })

  const readyPromise = new Promise((resolve, reject) => { ready = resolve })
  const update = () => {
    if (bundle && clientManifest) {
      ready()
      cb(bundle, {
        template,
        clientManifest
      })
    }
  }

  const clientCompiler = webpack(clientConfig)
  const devMiddleware = require('webpack-dev-middleware')(
    clientCompiler,
    env.devServerConfig
  )

  app.use(devMiddleware)
  app.use(
    require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 })
  )

  clientCompiler.hooks.done.tap('client-compiling', ({ compilation: { errors, warnings } }) => {
    errors.forEach(err => console.error(err))
    warnings.forEach(err => console.warn(err))
    if (errors.length) { return }

    clientManifest = JSON.parse(readFile(
      devMiddleware.fileSystem,
      'vue-ssr-client-manifest.json'
    ))
    update()

    if (clientReady) {
      clientReady()
      clientReady = null
    }
    else {
      showBanner()
    }
  })

  const serverCompiler = webpack(serverConfig)
  const mfs = new MFS()
  serverCompiler.outputFileSystem = mfs
  serverCompiler.watch({}, (err, stats) => {
    if (err) { throw err }
    stats = stats.toJson()
    if (stats.errors.length) { return }

    // read bundle generated by vue-ssr-webpack-plugin
    bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
    update()

    if (serverReady) {
      serverReady()
      serverReady = null
    }
  })

  Promise.all([
    clientPromise,
    serverPromise
  ]).then(() => {
    app.listen(env.port, env.host, () => {
      showBanner()
      require('opn')(env.uri)
    })
  })

  return readyPromise
}

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, {
    // for component caching
    cache: LRU({
      max: 1000,
      maxAge: 1000 * 60 * 15
    }),
    // recommended for performance
    runInNewContext: false
  }))
}

let renderer

// In development: setup the dev server with watch and hot-reload,
// and create a new renderer on bundle / index template update.
const readyPromise = setupDevServer(
  app,
  templatePath,
  (bundle, options) => {
    renderer = createRenderer(bundle, options)
  }
)

const serve = path => express.static(
  resolve('dev/' + path),
  { maxAge: 0 }
)

app.use('/statics', serve('statics'))

function render (req, res) {
  const s = Date.now()

  res.setHeader('Content-Type', 'text/html')
  res.setHeader('Server', serverInfo)

  const handleError = err => {
    if (err.url) {
      res.redirect(err.url)
    }
    else if (err.code === 404) {
      res.status(404).send('404 | Page Not Found')
    }
    else {
      // Render Error Page or Redirect
      res.status(500).send(`
        <div>500 | Internal Server Error</div>
        <div>error during render: ${req.url}</div>
        <pre>${err.stack}</pre>
      `)
      console.error(`error during render: ${req.url}`)
      console.error(err.stack)
    }
  }

  const context = {
    url: req.url,
    req,
    res,
    bodyClasses: '',
    htmlAttrs: '',
    baseHref: env.devServerConfig.publicPath
  }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      return handleError(err)
    }
    res.send(context.$getMetaHTML(html))
    console.log(` ⚡️ ${Date.now() - s}ms - ${req.url}`)
  })
}

app.get('*', (req, res) => {
  readyPromise.then(() => render(req, res))
})