Merge pull request #1 from ferrywlto/VueBootstrap

code fix and Bootstrap

Author: Ferry To

ClientApp/app.js

@@ -2,6 +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'
+
+Vue.use(BootstrapVue)
 
 const app = new Vue({
   router,

ClientApp/client.js

@@ -1,5 +1,9 @@
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
 import {
     app,
     router,

ClientApp/components/Dashboard.vue

@@ -1,3 +1,6 @@
 <template>
+<div>
     <h1>Dashboard</h1>
+    <b-badge variant="primary">Hello Bootstrap</b-badge>
+</div>
 </template>

ClientApp/vuex/actions.js

@@ -10,7 +10,7 @@ export const fetchInitialMessages = ({commit}) => {
 }
 
 export const fetchMessages = ({commit}, lastFetchedMessageDate) => {
-  axios.get('/fetchMessages?lastFetchedMessageDate=' + lastFetchedMessageDate)
+  axios.get('http://localhost:5000/fetchMessages?lastFetchedMessageDate=' + lastFetchedMessageDate)
     .then(response => {
       commit('FETCH_MESSAGES', response.data)
     }).catch(err => {

Controllers/HomeController.cs

@@ -34,8 +34,11 @@ public JsonResult initialMessages(){
 
         [Route("fetchMessages")]
         public JsonResult FetchMessages(DateTime lastFetchedMessageDate){
-            return Json(FakeMessageStore.FakeMessages.OrderByDescending(m => m.Date)
-            .SkipWhile(m => m.Date >= lastFetchedMessageDate).Take(1));
+            return Json(Message.CreateMessage(
+                "New Message",
+                DateTime.Now.Millisecond.ToString(),
+                DateTime.Now
+            ));
         }
     }
 }

README.md

@@ -1,6 +1,6 @@
 # README
 
-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. :)
+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. I personally did not have any prior knowledge in VueJS nor modern web development frameworks. I were a C# developer and learn VueJS by my own from VueJS documentation and Stu Ratcliffe blog post. Hope this helps if you also read the same blog post and got stuck some way. :pray: :grinning:
 
 You can get the complete code repo made by Stu Ratcliffe from [[Here]](https://github.com/sturatcliffe/VueDotnetSSR)
 
@@ -119,4 +119,15 @@ To simulate timely API call form remote server, we add the following line in Hom
     - 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.
+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.
+
+### BootstrapVue:
+Bootstrap is a very popular library for beautiful and simple UI components and styles.
+Using Bootstrap in VueJS application is easy with BootstrapVue:
+
+- Install: `npm i bootstrap-vue bootstrap@4.0.0-beta.2`
+- Import into app.js: `import BootstrapVue from 'bootstrap-vue'
+- Import the css files: (tricky here, for this repo I need to add the imports at client.js instead of app.js)  
+    import 'bootstrap/dist/css/bootstrap.css'
+    import 'boostrap-vue/dist/bootstrap-vue.css'
+- Add the Bootstrap components (e.g. I added a badge at Dashboard.vue template.)

package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "aspnet-prerendering": "^1.0.1",
     "axios": "^0.17.1",
+    "bootstrap": "^4.0.0-beta.2",
+    "bootstrap-vue": "^1.3.0",
     "lodash": "^4.17.4",
     "nprogress": "^0.2.0",
     "vue": "^2.5.9",