/koa-vue-ssr_init-dev-server

Primary LanguageJavaScriptOtherNOASSERTION

Initialize A Koa/Vue/Ssr Development Server

Table of Contents

What Is This

This module is basically a cleaned up version of vue-hackernews-2.0's setup-dev-server.js which utilizes koa instead of express. This module is consumed by koa-vue-ssr_proof-of-concept, which again was written using vue-hackernews-2.0 as reference.

Why Create it

In the hackernews project, the setup-dev-server.js file was very complex. So when I created my own vue ssr project it was beneficial to isolate that complexity into its own module. The intention is to keep the rest of the server code focused on problems particular to the application.

This Module's Responsibilities

  1. Watches the template html file and updates the vue renderer when modified
  2. Connects koa-webpack to the koa application passing it the client webpack compiler for HMR
  3. Attaches a 'done' event handler to the client webpack compiler and updates the vue renderer with the new clientManifest
  4. Runs the ssr webpack compiler's watch() method, updating the renderer with the new ssr bundle every pass.
  5. Returns a promise that:
    • resolves when both the bundle and clientManifest are created.
    • rejects if there is an error prior to the resolve. Errors occuring during the watch processes after the promise settles will be logged to stderr.

API

// All arguments are required
initDevServer({
  koaApp: <instanceof Koa>
  webpackConfigs: {
    client: <webpack configuration>
    ssr: <webpack configuration>
  }
  webpackHotClientPort: <integer>
  templatePath: <path to index html file>
})

// resolves to
.then({
  koaApp: <instanceof Koa>
  getRenderer: () => <instanceof BundleRenderer>
})

Reference