code formatting and write up

Author: ferrywlto

ClientApp/client.js

@@ -13,17 +13,20 @@ router.onReady(() => {
     const matched = router.getMatchedComponents(to)
     const prevMatched = router.getMatchedComponents(from)
 
+    // compare two list of components from previous route and current route
     let diffed = false
     const activated = matched.filter((c, i) => {
       return diffed || (diffed = (prevMatched[i] !== c))
     })
 
+    // if no new components loaded, do nothing
     if (!activated.length) {
       return next()
     }
 
     NProgress.start()
 
+    // for each newly loaded components, asynchorously load data to them
     Promise.all(activated.map(c => {
       if (c.asyncData) {
         return c.asyncData({store, route: to})

ClientApp/components/Messages.vue

@@ -14,8 +14,8 @@ export default {
   computed: mapGetters(['messages', 'lastFetchedMessageDate']),
   methods: 
     mapActions(['fetchMessages']), 
-    asyncData ({ $store }) {
-      return $store.dispatch('fetchInitialMessages')
+    asyncData ({ store }) {
+      return store.dispatch('fetchInitialMessages')
     }
 }
 </script>

ClientApp/server.js

@@ -7,7 +7,7 @@ export default context => {
     router.onReady(() => {
       const matchedComponents = router.getMatchedComponents()
       if (!matchedComponents.length) {
-        return reject({ code: 404 })
+        return reject(new Error({ code: 404 }))
       }
       Promise.all(matchedComponents.map(Component => {
         if (Component.asyncData) {

ClientApp/vuex/store.js

@@ -10,13 +10,13 @@ const store = new Vuex.Store({
 
   mutations: {
     INITIAL_MESSAGES: (state, payload) => {
-        state.messages = payload.messages
-        state.lastFetchedMessageDate = payload.lastFetchedMessageDate
-      },
+      state.messages = payload.messages
+      state.lastFetchedMessageDate = payload.lastFetchedMessageDate
+    },
     FETCH_MESSAGES: (state, payload) => {
-        state.messages = state.messages.concat(payload)
-        state.lastFetchedMessageDate = minBy(state.messages, 'date').date
-      }
+      state.messages = state.messages.concat(payload)
+      state.lastFetchedMessageDate = minBy(state.messages, 'date').date
+    }
   },
   actions: {
     fetchInitialMessages,

Controllers/HomeController.cs

@@ -12,6 +12,14 @@ public class HomeController : Controller
     {
         public IActionResult Index()
         {            
+            return View();
+        }
+
+        [Route("initialMessages")]
+        public JsonResult initialMessages(){
+            //Added to simulate initial loading from remote server
+            Thread.Sleep(2000);
+
             var initialMessages = FakeMessageStore.FakeMessages
                 .OrderByDescending(m => m.Date)
                 .Take(2);
@@ -21,26 +29,9 @@ public IActionResult Index()
                 LastFetchedMessageDate = initialMessages.Last().Date
             };
 
-            return View(initialValues);
+            return Json(initialValues);
         }
 
-        // [Route("initialMessages")]
-        // public JsonResult initialMessages(){
-        //     //Added to simulate initial loading from remote server
-        //     Thread.Sleep(2000);
-
-        //     var initialMessages = FakeMessageStore.FakeMessages
-        //         .OrderByDescending(m => m.Date)
-        //         .Take(2);
-
-        //     var initialValues = new ClientState(){
-        //         Messages = initialMessages,
-        //         LastFetchedMessageDate = initialMessages.Last().Date
-        //     };
-
-        //     return Json(initialValues);
-        // }
-
         [Route("fetchMessages")]
         public JsonResult FetchMessages(DateTime lastFetchedMessageDate){
             return Json(FakeMessageStore.FakeMessages.OrderByDescending(m => m.Date)

Models/FakeMessageStore.cs

@@ -2,14 +2,14 @@
 using System;
 
 public class FakeMessageStore {
-    private static DateTime startDateTime = new DateTime(2017, 11, 24);
+    private static DateTime startDateTime = DateTime.Now;
 
     public static readonly List<Message> FakeMessages = new List<Message>(){
         Message.CreateMessage("First message title", "First message text", startDateTime),
         Message.CreateMessage("2nd msg title", "2nd msg txt", startDateTime.AddDays(1)),
         Message.CreateMessage("3rd msg title", "3rd msg txt", startDateTime.AddDays(2)),
         Message.CreateMessage("4th msg title", "4th msg txt", startDateTime.AddDays(3)),
         Message.CreateMessage("5th msg title", "5th msg txt", startDateTime.AddDays(4)),
-        Message.CreateMessage("6th msg title", "6th msg txy", startDateTime.AddDays(5))
+        Message.CreateMessage("6th msg title", "6th msg txt", startDateTime.AddDays(5))
     };
 }

README.md

@@ -1,6 +1,8 @@
-This repository is a clone from Stu Ratcliffe [Server rendering Vue.js applications with ASP.NET Core](https://github.com/sturatcliffe/VueDotnetSSR)
+# README
 
-Following his articile and trying to have some write up. (e.g. using latest packages in package.json)
+This repository was built from scratch following the steps described in the original blog post *[Server rendering Vue.js applications with ASP.NET Core](https://stu.ratcliffe.io/2017/07/20/vuejs-serverside-rendering-with-aspnet-core)* from Stu Ratcliffe. The aim of this repository is to adding more steps and comments from my experience following the steps that make it works as a supplement of the original blog post. Hope this helps if you also read the same blog post and got stuck some way. :)
+
+You can get the complete code repo made by Stu Ratcliffe from [[Here]](https://github.com/sturatcliffe/VueDotnetSSR)
 
 ## Install and run:
 if Webpack is not installed yet:  
@@ -13,10 +15,27 @@ else
     webpack
     dotnet run
 
-## Packages used:
+## Packages used: *The description may not accurate, just my understanding*
+- vue <- VueJS
 - lodash <- similiar to numpy in Python, utilies library for manipulating array/object.
 - axios <- Promise based HTTP client for the browser and Node.js, think of $.ajax() if you come from jQuery world
-- vuex <- Vue variant of Flux implementation, just like Redux in React
+- vuex <- Vue variant of Flux implementation, just like Redux in React  
+- nprogress <- loading indiciator
+- vue-router <- enable client side "page" routing
+- vue-server-renderer <- enable Server Side Rendering
+- aspnet-prerendering <- enable ASP.NET to trigger Node for SSR
+
+- webpack <- pack your JavaScript files into bundles for faster loading, remove duplicate imports, reduce final code size
+- webpack-merge <- merge webpack config so common configuration attributes can be shared among configurations
+- webpack-hot-middleware <- enable hot reload of code changes
+- aspnet-webpack <- enable ASP.NET to execute webpack on demand during runtime.
+- vue-loader <- required for packing vuejs code
+- css-loader <- required if you have css file to pack
+- style-loader <- required if you use template with style
+- json-loader <- requiredd if you need to pack json file
+- vue-template-compiler <- required for packing if you use template in vue components
+- babel-* <- transpile code syntax used in Vue into browser understandable version before packing
+
 ### Working with data:
 - .Net part
     1. Message.cs
@@ -25,7 +44,8 @@ else
 - Vue part
     0. (create ClientApp/vuex folder)
     1. ClientApp/vuex/action.js
-    2. ClientApp/vuex/store.js
+    2. ClientApp/vuex/store.js  
+
 ### Client side routing:
 0. Move to ClientApp/components
 1. Dashboard.vue
@@ -37,7 +57,8 @@ else
 7. Move back to ClientApp folder
 8. Modify app.js
 9. Move back to .
-10. Modify Startup.cs
+10. Modify Startup.cs  
+
 ### Loading indicator:
 Here we try to modify the implementation order different from the original post.
 We are going to add the loading indicator before implementing the Server Side Rendering.
@@ -67,4 +88,35 @@ To simulate timely API call form remote server, we add the following line in Hom
             loader: "style-loader!css-loader" 
         }
 
-3. Modify ClientApp/vuex/actions.js, add `NProgress.start()` and `NProgress.done()` before and after axios remote call. 
+3. Modify `ClientApp/vuex/actions.js`, add `NProgress.start()` and `NProgress.done()` before and after axios remote call.
+
+### Server Side Renderering (SSR)
+
+1. Add the following dependencies to package.json:
+
+    - devDependencies:
+        - aspnet-webpack
+        - webpack-merge
+    - dependencies:
+        - vue-server-renderer
+        - aspnet-prerenderer *(Note that only version ^1.0.0 is supported, using latest ^3.0.0+ will break the code.)*
+
+2. Split the code into two part:
+
+    1. `server.js` <- this will load by renderOnServer.js, which aspnet-prerendering will trigger Node to execute and return pre-rendered result back to renderOnServer.js and thus send to browser as initial state of app.
+    2. `client.js` <- once initial app state rendered and injected in the resulting index.cshtml, the script tag will load client.js and mount it to pre-rendered app tag.
+
+3. Create Node server code for ASP.NET Core to trigger the Node hosting service to execute
+
+    - `rendererOnServer.js` <- responsible for loading the webpacked server.js for Node to render the initial app state.
+
+4. ASP.NET Core part
+
+    - Edit `Views/Home/index.cshtml` app tag to use `aspnet-prerendering` attributes
+
+5. Webpack Configuration
+
+    - Edit `webpack.config.js`, make use of `webpack-merge` to split the original configuration into two sets.
+  
+### Thoughts:
+SSR was by far the most difficult part of my VueJS journey, it takes more than half of the time of my VueJS learning. Whether to use Server Side Rendering or not is highly optional, you don't need it to write a cool SPA. The performance and user experience gain is arguablely worth the complexity and develop time involved.

Views/Home/Index.cshtml

@@ -1,3 +1,2 @@
-@model ClientState
-<div id="app" asp-prerender-module="ClientApp/renderOnServer" asp-prerenderer-data="Model"></div>
+<div id="app" asp-prerender-module="ClientApp/renderOnServer"></div>
 <script src="~/dist/main-client.js" asp-append-version="true"></script>

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path')
-// const webpack = require('webpack')
 
 // using webpack-merge so we don't have to repeat common configuration attributes twice
 const merge = require('webpack-merge')
@@ -33,28 +32,28 @@ module.exports = (env) => {
   })
 
   const clientBundleConfig = merge(sharedConfig(), {
-      entry: { 'main-client': './ClientApp/client.js' },
-      output: {
-          path: path.join(__dirname, 'wwwroot/dist')
-      }
-  });
+    entry: { 'main-client': './ClientApp/client.js' },
+    output: {
+      path: path.join(__dirname, 'wwwroot/dist')
+    }
+  })
 
   const serverBundleConfig = merge(sharedConfig(), {
-      target: 'node',
-      entry: { 'main-server': './ClientApp/server.js' },
-      output: {
-          libraryTarget: 'commonjs2',
-          path: path.join(__dirname, 'wwwroot/dist')
-      },
-      module: {
-          rules: [
-              {
-                  test: /\.json?$/,
-                  loader: 'json-loader'
-              }
-          ]
-      },
-  });
+    target: 'node',
+    entry: { 'main-server': './ClientApp/server.js' },
+    output: {
+      libraryTarget: 'commonjs2',
+      path: path.join(__dirname, 'wwwroot/dist')
+    },
+    module: {
+      rules: [
+        {
+          test: /\.json?$/,
+          loader: 'json-loader'
+        }
+      ]
+    }
+  })
 
-  return [clientBundleConfig, serverBundleConfig];
+  return [clientBundleConfig, serverBundleConfig]
 }