progress to real hapi-vue-ssr

Author: marcuspoehls

examples/hapi-vue-ssr/base/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="app">
+    <header class="header">
+      <nav class="inner">
+        <router-link to="/top">Top</router-link>
+        <router-link to="/new">New</router-link>
+        <router-link to="/show">Show</router-link>
+        <router-link to="/ask">Ask</router-link>
+        <router-link to="/job">Jobs</router-link>
+        <a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener">
+          Built with Vue.js
+        </a>
+      </nav>
+    </header>
+    <transition name="fade" mode="out-in">
+      <router-view class="view"></router-view>
+    </transition>
+  </div>
+</template>

examples/hapi-vue-ssr/base/app.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+// Expose a factory function that creates a fresh set of store, router,
+// app instances on each call (which is called for each SSR request)
+export function createApp () {
+  // create the app instance.
+  // here we inject the router, store and ssr context to all child components,
+  // making them available everywhere as `this.$router` and `this.$store`.
+  const app = new Vue({
+    render: h => h(App)
+  })
+
+  // expose the app, the router and the store.
+  // note we are not mounting the app here, since bootstrapping will be
+  // different depending on whether we are in a browser or on the server.
+  return { app }
+}

examples/hapi-vue-ssr/base/handler.js

@@ -4,43 +4,53 @@ const Fs = require('fs')
 const Vue = require('vue')
 const Boom = require('boom')
 const Path = require('path')
+const { createBundleRenderer } = require('vue-server-renderer')
 
 // initialize Renderer with default template layout
 const LayoutPath = Path.resolve(__dirname, '..', 'views', 'layout.html')
-const Renderer = require('vue-server-renderer').createRenderer({
-  template: Fs.readFileSync(LayoutPath, 'utf-8'),
-  data: {
-    title: 'Welcome to hapi-vue-ssr'
-  }
+const bundle = require(Path.resolve(__dirname, '..', 'dist', 'vue-ssr-bundle.json'))
+
+const Renderer = createBundleRenderer(bundle, {
+  // I know, readFileSync is bad practice
+  // It's just shorter to read here.
+  template: Fs.readFileSync(LayoutPath, 'utf-8')
 })
 
-function renderAndReply (template, context, reply) {
+function render (template, context, reply) {
   const TemplatePath = Path.resolve(__dirname, '..', 'views', `${template}.html`)
   const app = new Vue({
     data: context,
     template: Fs.readFileSync(TemplatePath, 'utf-8')
   })
 
-  return Renderer.renderToString(app, (err, html) => {
+  console.log(app)
+
+  return Renderer.renderToString(context, (err, html) => {
     if (err) {
       console.log(err)
       return reply(Boom.boomify(err, { statusCode: 500 }))
     }
 
-    return reply(html)
+    return reply(html).type('text/html')
   })
 }
 
 const Handler = {
   index: {
     handler: (request, reply) => {
-      renderAndReply('index', null, reply)
+      render('index', { title: 'Welcome to hapi-vue-ssr' }, reply)
+    }
+  },
+
+  assets: {
+    handler: {
+      directory: { path: Path.resolve(__dirname, '..', 'dist') }
     }
   },
 
   missing: {
     handler: (request, reply) => {
-      renderAndReply('about', { url: request.url.path }, reply)
+      render('about', { title: 'About', url: request.url.path }, reply)
     }
   }
 }

examples/hapi-vue-ssr/base/index.js

@@ -3,13 +3,15 @@
 const Routes = require('./routes')
 
 exports.register = (server, options, next) => {
+  server.dependency([ 'inert' ])
+
   server.route(Routes)
-  server.log('info', 'Plugin registered: 404 handler')
+  server.log('info', 'Plugin registered: hapi-vue-ssr base')
 
   next()
 }
 
 exports.register.attributes = {
-  name: '404-handler',
+  name: 'hapi-vue-ssr-base',
   version: '1.0.0'
 }

examples/hapi-vue-ssr/base/main.client.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => {
+    h(App)
+  }
+})

examples/hapi-vue-ssr/base/main.server.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+// Receives the context of the render call, returning a Promise resolution to the root Vue instance.
+export default context => {
+  return Promise.resolve(
+    new Vue({
+      render: h => {
+        return h(App)
+      }
+    })
+  )
+}

examples/hapi-vue-ssr/base/routes.js

@@ -8,6 +8,11 @@ const Routes = [
     path: '/',
     config: Handler.index
   },
+  {
+    method: 'GET',
+    path: '/dist/{path*}',
+    config: Handler.assets
+  },
   {
     method: [ 'GET', 'POST' ],
     path: '/{path*}',

examples/hapi-vue-ssr/dist/build.js

@@ -0,0 +1,49 @@
+{
+    "name": "nodejs-tutorials-hapi-vue-ssr",
+    "description": "Example code related to an extensive hapi series on Future Studio (https://futurestud.io)",
+    "version": "1.0.0",
+    "author": "Future Studio <info@futurestud.io>",
+    "bugs": "https://github.com/fs-opensource/nodejs-tutorials-hapi/issues",
+    "contributors": [
+        {
+            "name": "Marcus Poehls",
+            "email": "marcus@futurestud.io"
+        }
+    ],
+    "dependencies": {
+        "vue": "~2.5.2"
+    },
+    "devDependencies": {
+        "babel-core": "~6.26.0",
+        "babel-loader": "^7.1.2",
+        "babel-preset-env": "~1.6.0",
+        "babel-preset-es2015": "~6.24.1",
+        "cross-env": "^5.0.5",
+        "css-loader": "~0.28.7",
+        "file-loader": "^1.1.4",
+        "vue-loader": "^13.0.5",
+        "vue-server-renderer": "~2.5.2",
+        "vue-ssr-webpack-plugin": "~3.0.0",
+        "vue-template-compiler": "~2.5.2",
+        "vuex": "~3.0.0",
+        "webpack": "^3.6.0",
+        "webpack-dev-server": "~2.9.2"
+    },
+    "engines": {
+        "node": ">=4.0.0"
+    },
+    "homepage": "https://futurestud.io/tutorials/hapi-get-your-server-up-and-running",
+    "keywords": [
+        "hapi",
+        "node.js",
+        "tutorials"
+    ],
+    "license": "MIT",
+    "repository": "https://github.com/fs-opensource/nodejs-tutorials-hapi",
+    "scripts": {
+        "build": "npm run build:server && npm run build:client",
+        "build:client": "cross-env NODE_ENV=production webpack --config webpack.client.config.js --progress --hide-modules",
+        "build:server": "cross-env NODE_ENV=production webpack --config webpack.server.config.js --progress --hide-modules",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    }
+}

examples/hapi-vue-ssr/dist/build.js.map

@@ -3,10 +3,8 @@
         <br>
         <h2>Hey there 😘</h2>
         <p>
-            Future Studio is helping 5,000+ users daily to solve
-            Android and Node.js problems with 350+ written tutorials
-            and videos. We’re on a mission to provide new in-depth
-            content every week.
+            Future Studio is helping 5,000+ users daily to solve Android and Node.js problems with 350+ written tutorials and videos.
+            We’re on a mission to provide new in-depth content every week.
         </p>
 
         <hr>
@@ -22,4 +20,4 @@ <h2>Hey there 😘</h2>
             You’re here: {{ url }}
         </p>
     </div>
-</div>
+</div>

examples/hapi-vue-ssr/dist/vue-ssr-bundle.json

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title>hapi & Vue SSR</title>
+    <title>{{title}}</title>
 
     <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
     <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
@@ -15,13 +16,20 @@
         }
     </style>
 </head>
+
 <body>
+    <div id="skip">
+        <a href="#app">skip to content</a>
+    </div>
 
     <div class="container">
 
         <!--vue-ssr-outlet-->
 
     </div>
 
+    <script src="/dist/build.js"></script>
+
 </body>
+
 </html>

examples/hapi-vue-ssr/package.json

@@ -0,0 +1,73 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  entry: './base/main.client.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          presets: ['es2015']
+        }
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}