vue ssr with router

build/webpack.base.config.js

@@ -100,13 +100,13 @@ module.exports = (env, argv) => {
             chunks: 'initial',
             name: 'vendor',
             enforce: true
+          },
+          'css-vendor': {
+            test: /styles[\\/]index.(s)?css$/,
+            chunks: 'initial',
+            name: 'css-vendor',
+            enforce: true
           }
-          // 'css-vendor': {
-          //   test: /style[\\/]index.(s)?css$/,
-          //   chunks: 'initial',
-          //   name: 'css-vendor',
-          //   enforce: true
-          // }
         }
       },
       minimizer: [new OptimizeCssAssetsWebpackPlugin(), new TerserPlugin()]

build/webpack.ssr.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const nodeExternals = require('webpack-node-externals');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const webpack = require('webpack');
 
 module.exports = {
   target: 'node',
@@ -42,5 +43,10 @@ module.exports = {
     ]
   },
 
-  plugins: [new VueLoaderPlugin()]
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    })
+  ]
 };

package.json

@@ -20,6 +20,7 @@
     "express": "4.17.1",
     "vue": "2.6.12",
     "vue-router": "3.4.9",
+    "vue-server-renderer": "2.6.12",
     "vuex": "3.6.0"
   },
   "devDependencies": {
@@ -40,6 +41,7 @@
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "5.0.0",
     "html-webpack-plugin": "4.5.1",
+    "ignore-loader": "0.1.2",
     "mini-css-extract-plugin": "1.3.3",
     "node-sass": "5.0.0",
     "nodemon": "2.0.7",
@@ -51,6 +53,7 @@
     "webpack": "5.11.1",
     "webpack-cli": "4.3.1",
     "webpack-dev-middleware": "4.0.2",
-    "webpack-hot-middleware": "2.25.0"
+    "webpack-hot-middleware": "2.25.0",
+    "webpack-node-externals": "2.5.2"
   }
 }

server.js

@@ -2,6 +2,8 @@ const express = require('express');
 const path = require('path');
 const fs = require('fs');
 
+const { createBundleRenderer } = require('vue-server-renderer');
+
 const config = {
   port: process.env.PORT || 3000
 };
@@ -13,6 +15,11 @@ const indexHTML = fs.readFileSync(
   'utf-8'
 );
 
+const appBundle = fs.readFileSync(
+  path.join(__dirname, 'ssr', 'App.js'),
+  'utf-8'
+);
+
 app.use(express.static('public'));
 
 if (process.env.NODE_ENV === 'development') {
@@ -21,9 +28,19 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 app.get('/*', (req, res) => {
-  // res.send('index.html');
-  res.write(indexHTML);
-  res.end();
+  const renderer = createBundleRenderer(appBundle);
+
+  renderer.renderToString({ url: req.url }, (err, html) => {
+    if (err) {
+      console.log(err);
+      return res.status(500).send('server error');
+    }
+
+    const ssrIndexHTML = indexHTML.replace('{{APP}}', html);
+
+    res.write(ssrIndexHTML);
+    res.end();
+  });
 });
 
 app.use((req, res, next) => {

src/app.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import AppLayout from './theme/AppLayout.vue';
 import router from './router';
 import store from './vuex-state';
-import 'bulma';
+import './styles/index.scss';
 
 // Vue.config.productionTip = false;
 

src/client-entry.js

@@ -1,3 +1,5 @@
-import { app } from './app';
+import { app, router } from './app';
 
-app.$mount('#app');
+router.onReady(() => {
+  app.$mount('#app');
+});

src/network/index.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 axios.defaults.baseURL = 'https://api.fullstackweekly.com/';
 
 axios.interceptors.request.use(config => {
-  if (window && window.localStorage.getItem('token')) {
+  if (typeof window !== 'undefined' && window.localStorage.getItem('token')) {
     config.headers = {
       Authorization: `Bearer ${window.localStorage.getItem('token')}`
     };
@@ -19,7 +19,7 @@ const getPosts = async categoryId => {
     );
     return resp.data;
   } catch (error) {
-    console.error(`ERROR HERE:: ${error.message}`);
+    console.error(`ERROR HERE at network.getPosts:: ${error.message}`);
     return [
       {
         id: 0,