snapshot 20180326

Author: ferrywlto

ClientApp/app.js

@@ -2,9 +2,9 @@ import Vue from 'vue'
 import App from './components/App.vue'
 import store from './vuex/store.js'
 import router from './router'
-import BootstrapVue from 'bootstrap-vue'
+//import BootstrapVue from 'bootstrap-vue'
 
-Vue.use(BootstrapVue)
+ //Vue.use(BootstrapVue)
 
 const app = new Vue({
   router,

ClientApp/client.js

@@ -9,7 +9,9 @@ import {
     router,
     store
 } from './app'
-
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+Vue.use(BootstrapVue)
 store.replaceState(__INITIAL_STATE__)
 
 router.onReady(() => {

ClientApp/renderOnServer.js

@@ -6,22 +6,33 @@ const path = require('path')
 const filePath = path.join(__dirname, '../wwwroot/dist/main-server.js')
 const code = fs.readFileSync(filePath, 'utf8')
 
-var prerendering = require('aspnet-prerendering')
+const vue_renderer = require('vue-server-renderer').createBundleRenderer(code)
 
 //prevent XSS attack when initialize state
 var serialize = require('serialize-javascript')
-
+var prerendering = require('aspnet-prerendering')
 module.exports = prerendering.createServerRenderer(function (params) {
   return new Promise(
-    function (resolve, reject) {
+    function (resolve, reject) { 
+      // console.log('#prerendering#',params)
       const context = {
         url: params.url,
+        absoluteUrl: params.absoluteUrl,
+        baseUrl: params.baseUrl,
+        data: params.data,
+        domainTasks: params.domainTasks,
+        location: params.location,
+        origin: params.origin,
         xss: serialize("</script><script>alert('Possible XSS vulnerability from user input!')</script>")
       }
-      resolve({
-        globals: {
-          __INITIAL_STATE__: context
-        }
+      const serverVueAppHtml = vue_renderer.renderToString(context, (err, _html) => {
+        if(err) { reject(err.message) }
+        resolve({
+          globals: {
+            html: _html,
+            __INITIAL_STATE__: context.state
+          }
+        })
       })
   })
 });

ClientApp/server.js

@@ -11,14 +11,14 @@ export default context => {
       }
       Promise.all(matchedComponents.map(Component => {
         if (Component.asyncData) {
-          return Component.asyncData({
-            store
-          })
+          return Component.asyncData({ store })
         }
-      })).then(() => {
+      }))
+      .then(() => {
         context.state = store.state
         resolve(app)
-      }).catch(reject)
+      })
+      .catch(reject)
     }, reject)
   })
 }

README.md

@@ -99,7 +99,7 @@ To simulate timely API call form remote server, we add the following line in Hom
     - devDependencies:
         - aspnet-webpack
         - webpack-merge
-    - dependencies:
+    - dependencies:x
         - vue-server-renderer
         - aspnet-prerenderer
 
@@ -181,3 +181,7 @@ and when you inspect the HTML from browser you will see the tags are escaped:
     window.__INITIAL_STATE__ = {"url":"/","xss":"\"\\u003C\\u002Fscript\\u003E\\u003Cscript\\u003Ealert('Possible XSS vulnerability from user input!')\\u003C\\u002Fscript\\u003E\""};
 
 Cheers. :smirk:
+
+### Reference
+*[Building Single Page Applications on ASP.NET Core with JavaScriptServices](https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/)*
+*[Use JavaScriptServices to Create Single Page Applications in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa-services)*