From 2067ea275812fee0a36e38c601be1c1fdebf704e Mon Sep 17 00:00:00 2001
From: Steve Sanderson <stevesa@microsoft.com>
Date: Fri, 10 Mar 2017 10:51:47 +0000
Subject: [PATCH] Add server-side rendering (via bundleRenderer, as this is
 what the Vue docs recommend, and apparently the only way it does
 encapsulation)

---
 templates/VueSpa/ClientApp/boot-client.ts     | 13 ++---
 .../VueSpa/ClientApp/boot-server-bundle.ts    | 16 ++++++
 templates/VueSpa/ClientApp/boot-server.ts     | 18 ++++++
 .../ClientApp/components/app/app.vue.html     |  3 +-
 .../navmenu/navmenu.css}                      |  0
 .../components/navmenu/navmenu.vue.html       |  2 +
 templates/VueSpa/ClientApp/router.ts          | 13 -----
 templates/VueSpa/ClientApp/routes.ts          |  5 ++
 templates/VueSpa/Views/Home/Index.cshtml      |  6 +-
 templates/VueSpa/Views/Shared/_Layout.cshtml  |  3 -
 templates/VueSpa/package.json                 |  6 +-
 templates/VueSpa/tsconfig.json                |  3 +-
 templates/VueSpa/webpack.config.js            | 56 +++++++++++++++----
 templates/VueSpa/webpack.config.vendor.js     | 24 ++++----
 14 files changed, 117 insertions(+), 51 deletions(-)
 create mode 100644 templates/VueSpa/ClientApp/boot-server-bundle.ts
 create mode 100644 templates/VueSpa/ClientApp/boot-server.ts
 rename templates/VueSpa/ClientApp/{css/site.css => components/navmenu/navmenu.css} (100%)
 delete mode 100644 templates/VueSpa/ClientApp/router.ts
 create mode 100644 templates/VueSpa/ClientApp/routes.ts

diff --git a/templates/VueSpa/ClientApp/boot-client.ts b/templates/VueSpa/ClientApp/boot-client.ts
index b86ea2a..aa5e0a8 100644
--- a/templates/VueSpa/ClientApp/boot-client.ts
+++ b/templates/VueSpa/ClientApp/boot-client.ts
@@ -1,11 +1,10 @@
-import './css/site.css';
 import Vue from 'vue';
-import router from './router';
-
-const App = require('./components/app/app.vue.html');
+import VueRouter from 'vue-router';
+import { routes } from './routes';
+Vue.use(VueRouter);
 
 new Vue({
-    el: 'app',
-    render: h => h(App, { props: {} }),
-    router: router
+    el: '#app-root',
+    router: new VueRouter({ mode: 'history', routes: routes }),
+    render: h => h(require('./components/app/app.vue.html'))
 });
diff --git a/templates/VueSpa/ClientApp/boot-server-bundle.ts b/templates/VueSpa/ClientApp/boot-server-bundle.ts
new file mode 100644
index 0000000..ad2a7cb
--- /dev/null
+++ b/templates/VueSpa/ClientApp/boot-server-bundle.ts
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
+import { createBundleRenderer } from 'vue-server-renderer';
+import { routes } from './routes';
+Vue.use(VueRouter);
+
+export default function(context: any) {
+    const router = new VueRouter({ mode: 'history', routes: routes })
+    router.push(context.url);
+
+    return new Vue({
+        render: h => h(require('./components/app/app.vue.html')),
+        router: router
+    });
+}
diff --git a/templates/VueSpa/ClientApp/boot-server.ts b/templates/VueSpa/ClientApp/boot-server.ts
new file mode 100644
index 0000000..bbe4e4c
--- /dev/null
+++ b/templates/VueSpa/ClientApp/boot-server.ts
@@ -0,0 +1,18 @@
+import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
+import { createBundleRenderer } from 'vue-server-renderer';
+const path = require('path');
+const bundleRenderer = createBundleRenderer(path.resolve('ClientApp/dist/vue-ssr-bundle.json'), {
+    template: '<!--vue-ssr-outlet-->'
+});
+
+export default createServerRenderer(params => {
+    return new Promise<RenderResult>((resolve, reject) => {
+        bundleRenderer.renderToString(params, (error, html) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve({ html: html });
+            }
+        });
+    });
+});
diff --git a/templates/VueSpa/ClientApp/components/app/app.vue.html b/templates/VueSpa/ClientApp/components/app/app.vue.html
index 65a2ff9..6a108b8 100644
--- a/templates/VueSpa/ClientApp/components/app/app.vue.html
+++ b/templates/VueSpa/ClientApp/components/app/app.vue.html
@@ -1,5 +1,5 @@
 <template>
-    <div class="container-fluid">
+    <div id='app-root' class="container-fluid">
         <div class="row">
             <div class="col-sm-3">
                 <menu-component />
@@ -9,7 +9,6 @@
             </div>
         </div>
     </div>
-
 </template>
 
 <script src="./app.ts"></script>
diff --git a/templates/VueSpa/ClientApp/css/site.css b/templates/VueSpa/ClientApp/components/navmenu/navmenu.css
similarity index 100%
rename from templates/VueSpa/ClientApp/css/site.css
rename to templates/VueSpa/ClientApp/components/navmenu/navmenu.css
diff --git a/templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html b/templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html
index 33a6e50..642a522 100644
--- a/templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html
+++ b/templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html
@@ -33,3 +33,5 @@
         </div>
     </div>
 </template>
+
+<style src="./navmenu.css" />
diff --git a/templates/VueSpa/ClientApp/router.ts b/templates/VueSpa/ClientApp/router.ts
deleted file mode 100644
index 748b93d..0000000
--- a/templates/VueSpa/ClientApp/router.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-
-Vue.use(VueRouter);
-
-export default new VueRouter({
-    mode: 'history',
-    routes: [
-        { path: '/', component: require('./components/home/home.vue.html') },
-        { path: '/counter', component: require('./components/counter/counter.vue.html') },
-        { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
-    ]
-});
diff --git a/templates/VueSpa/ClientApp/routes.ts b/templates/VueSpa/ClientApp/routes.ts
new file mode 100644
index 0000000..ba2d9b4
--- /dev/null
+++ b/templates/VueSpa/ClientApp/routes.ts
@@ -0,0 +1,5 @@
+export const routes = [
+    { path: '/', component: require('./components/home/home.vue.html') },
+    { path: '/counter', component: require('./components/counter/counter.vue.html') },
+    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') }
+];
diff --git a/templates/VueSpa/Views/Home/Index.cshtml b/templates/VueSpa/Views/Home/Index.cshtml
index 693b74f..e4b2151 100644
--- a/templates/VueSpa/Views/Home/Index.cshtml
+++ b/templates/VueSpa/Views/Home/Index.cshtml
@@ -2,8 +2,10 @@
     ViewData["Title"] = "Home Page";
 }
 
-<app>Loading...</app>
+<div asp-prerender-module="ClientApp/dist/main-server">
+    <div id='app-root'>Loading...</div>
+</div>
 
 @section scripts {
-    <script src="~/dist/main.js" asp-append-version="true"></script>
+    <script src="~/dist/main-client.js" asp-append-version="true"></script>
 }
diff --git a/templates/VueSpa/Views/Shared/_Layout.cshtml b/templates/VueSpa/Views/Shared/_Layout.cshtml
index a770ceb..562914f 100644
--- a/templates/VueSpa/Views/Shared/_Layout.cshtml
+++ b/templates/VueSpa/Views/Shared/_Layout.cshtml
@@ -6,9 +6,6 @@
         <title>@ViewData["Title"] - WebApplicationBasic</title>
 
         <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
-        <environment names="Staging,Production">
-            <link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
-        </environment>
     </head>
     <body>
         @RenderBody()
diff --git a/templates/VueSpa/package.json b/templates/VueSpa/package.json
index a8716eb..42c7db4 100644
--- a/templates/VueSpa/package.json
+++ b/templates/VueSpa/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "devDependencies": {
     "@types/requirejs": "^2.1.28",
+    "aspnet-prerendering": "^2.0.3",
     "aspnet-webpack": "^1.0.27",
     "av-ts": "^0.7.1",
     "awesome-typescript-loader": "^3.0.0",
@@ -19,8 +20,11 @@
     "vue": "^2.2.2",
     "vue-loader": "^11.1.4",
     "vue-router": "^2.3.0",
+    "vue-server-renderer": "^2.2.2",
+    "vue-ssr-webpack-plugin": "^1.0.2",
     "vue-template-compiler": "^2.2.2",
     "webpack": "^2.2.0",
-    "webpack-hot-middleware": "^2.12.2"
+    "webpack-hot-middleware": "^2.12.2",
+    "webpack-merge": "^4.0.0"
   }
 }
diff --git a/templates/VueSpa/tsconfig.json b/templates/VueSpa/tsconfig.json
index fb41fd3..c62193b 100644
--- a/templates/VueSpa/tsconfig.json
+++ b/templates/VueSpa/tsconfig.json
@@ -7,7 +7,8 @@
     "target": "es5",
     "sourceMap": true,
     "skipDefaultLibCheck": true,
-    "types": ["requirejs"]
+    "types": ["requirejs"],
+    "lib": ["dom", "es2015"]
   },
   "exclude": [
       "bin",
diff --git a/templates/VueSpa/webpack.config.js b/templates/VueSpa/webpack.config.js
index edf8881..d6339d6 100644
--- a/templates/VueSpa/webpack.config.js
+++ b/templates/VueSpa/webpack.config.js
@@ -2,16 +2,19 @@ const path = require('path');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
+const VueSSRPlugin = require('vue-ssr-webpack-plugin');
+const merge = require('webpack-merge');
 const bundleOutputDir = './wwwroot/dist';
 
 module.exports = (env) => {
     const isDevBuild = !(env && env.prod);
-    return [{
+
+    // Configuration in common to both client-side and server-side bundles
+    const sharedConfig = {
         stats: { modules: false },
-        entry: { 'main': './ClientApp/boot-client.ts' },
+        context: __dirname,
         resolve: { extensions: [ '.js', '.ts' ] },
         output: {
-            path: path.join(__dirname, bundleOutputDir),
             filename: '[name].js',
             publicPath: '/dist/'
         },
@@ -25,25 +28,56 @@ module.exports = (env) => {
         },
         plugins: [
             new CheckerPlugin(),
-            new webpack.DllReferencePlugin({
-                context: __dirname,
-                manifest: require('./wwwroot/dist/vendor-manifest.json')
-            }),
             new webpack.DefinePlugin({
                 'process.env': {
                     NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                 }
             })
+        ]
+    };
+
+    // Configuration for client-side bundle suitable for running in browsers
+    const clientBundleOutputDir = './wwwroot/dist';
+    const clientBundleConfig = merge(sharedConfig, {
+        entry: { 'main-client': './ClientApp/boot-client.ts' },
+        output: { path: path.join(__dirname, clientBundleOutputDir) },
+        plugins: [
+            new webpack.DllReferencePlugin({
+                context: __dirname,
+                manifest: require('./wwwroot/dist/vendor-manifest.json')
+            })
         ].concat(isDevBuild ? [
             // Plugins that apply in development builds only
             new webpack.SourceMapDevToolPlugin({
                 filename: '[file].map', // Remove this line if you prefer inline source maps
-                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
+                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
             })
         ] : [
             // Plugins that apply in production builds only
-            new webpack.optimize.UglifyJsPlugin(),
-            new ExtractTextPlugin('site.css')
+            new webpack.optimize.UglifyJsPlugin()
         ])
-    }];
+    });
+
+    // Configuration for server-side (prerendering) bundle suitable for running in Node
+    const serverBundlesOutput = {
+        libraryTarget: 'commonjs2',
+        path: path.join(__dirname, './ClientApp/dist')
+    };
+    const serverBundleConfig = merge(sharedConfig, {
+        resolve: { mainFields: ['main'] },
+        entry: { 'main': './ClientApp/boot-server-bundle.ts' },
+        externals: {},
+        plugins: [new VueSSRPlugin()],
+        output: serverBundlesOutput,
+        target: 'node',
+        devtool: 'inline-source-map'
+    });
+
+    const vueBundleRendererConfig = merge(sharedConfig, {
+        entry: { 'main-server': './ClientApp/boot-server.ts' },
+        output: serverBundlesOutput,
+        target: 'node'
+    });
+
+    return [clientBundleConfig, serverBundleConfig, vueBundleRendererConfig];
 };
diff --git a/templates/VueSpa/webpack.config.vendor.js b/templates/VueSpa/webpack.config.vendor.js
index 424295c..da8d727 100644
--- a/templates/VueSpa/webpack.config.vendor.js
+++ b/templates/VueSpa/webpack.config.vendor.js
@@ -5,17 +5,10 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 module.exports = (env) => {
     const isDevBuild = !(env && env.prod);
     const extractCSS = new ExtractTextPlugin('vendor.css');
+
     return [{
         stats: { modules: false },
-        resolve: {
-            extensions: [ '.js' ]
-        },
-        module: {
-            rules: [
-                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' },
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
-            ]
-        },
+        resolve: { extensions: [ '.js' ] },
         entry: {
             vendor: [
                 'bootstrap',
@@ -27,15 +20,24 @@ module.exports = (env) => {
                 'vue-router'
             ],
         },
-        output: {
+        module: {
+            rules: [
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) },
+                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
+            ]
+        },
+        output: { 
             path: path.join(__dirname, 'wwwroot', 'dist'),
             publicPath: '/dist/',
             filename: '[name].js',
-            library: '[name]_[hash]',
+            library: '[name]_[hash]'
         },
         plugins: [
             extractCSS,
             new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
+            }),
             new webpack.DllPlugin({
                 path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                 name: '[name]_[hash]'