Added Server Side Rendering

API/package.json

@@ -28,13 +28,13 @@
     "passport": "^0.4.1",
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",
-    "pg": "^7.15.1"
+    "pg": "^7.18.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.7",
-    "@babel/core": "^7.7.7",
-    "@babel/node": "^7.7.7",
-    "@babel/preset-env": "^7.7.7",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/node": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
     "nodemon": "^2.0.2"
   }
 }

API/src/config.js.template

@@ -25,7 +25,7 @@ const config = {
       // https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx
       secret: 'my secret secret',
       BCRYPT_SALT_ROUNDS: 12,
-      secureCookie: true,
+      secureCookie: true, // Marks the cookie to be used with HTTPS only
     }
 };
 

Frontend/README.md

@@ -1,23 +1,36 @@
 # Frontend
-Vue.js Frontend for [granblue.party](https://www.granblue.party) website.
+Vue.js Frontend for [granblue.party](https://www.granblue.party) website with Server Side Rendering.
 
 ## Requirements
 - NodeJS 12
 
 ## Installation
 To install the necessary modules, run `npm install` in the current folder.
 
-Copy `./src/js/config.js.template` to `./src/js/config.js` and edit relevant values.
+Copy `./src/js/config.js.template` to `./src/js/config.js` and edit relevant values. \
+Copy `./src/js/config-server.js.template` to `./src/js/config-server.js` and edit relevant values.
 
 ## Usage
-- `npm start` to run in development mode
-- `npm run build` to build the site for production
+- `npm run build:static` to build static assets
+
+### Development mode
+Each instance needs to run for HMR to work. Wait for a command to finish producing its files before running the next one.
+
+- `npm run dev:server`
+- `npm run dev:client`
+- `npm run nodemon`
+
+### Production
+- `npm run build:server`
+- `npm run build:client`
+- `npm start`
 
 ## Hosting the site
-The website is using Nginx to run in production, but you can use whatever you prefer. Since the frontend is using Vue Router, you will need to modify your server configuration for it to work: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
+The website is using Nginx to run in production, but you can use whatever you prefer. Since the frontend is using Vue Server Side Rendering, it is recommanded to host the Node instance behind a reverse proxy. The default port is 4000.
 
 ## Changelog
 
+- 2020-02-01: Server Side Rendering
 - 2019-12-06: Version 2: new design, using TailwindCSS and Font Awesome.
 - 2019-08-30: Wide layout for Party Builder. The Details tab hides an experimental damage calculator
 - 2019-08-11: Support for Skill Keys and Perpetuity Rings added in Party Builder.

Frontend/nodemon.json

@@ -0,0 +1,7 @@
+{
+  "watch": [
+    "dist/vue-ssr-server-bundle.json",
+    "server.js"
+  ],
+  "ext": "json,js"
+}