- implement new script to test compiled (and served from "server") version of vuegg in local. - implement NotFound component (due vue-router history-mode)

- fix fallback routing for history-api (vue-router history mode).

Author: alxpez

client/config/dev.env.js

@@ -3,6 +3,6 @@ var prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  CLIENT_ID: '"116bed3e72c3aab96b76"',
-  CALLBACK_URL: '"http://localhost:8080/auth"'
+  CLIENT_ID: '116bed3e72c3aab96b76',
+  CALLBACK_URL: 'http://localhost:8080/auth'
 })

client/config/index.js

@@ -27,6 +27,7 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
+    // Development backend server
     proxyTable: {
       '/api': {
         target: 'http://localhost:5000',

client/config/prod.env.js

@@ -1,5 +1,5 @@
 module.exports = {
   NODE_ENV: '"production"',
-  CLIENT_ID: '"be437b3a1e6ac9b93c05"',
-  CALLBACK_URL: '"https://vuegg.now.sh/auth"'
+  CLIENT_ID: 'be437b3a1e6ac9b93c05',
+  CALLBACK_URL: 'https://vuegg.now.sh/auth'
 }

client/config/test.env.js

@@ -3,6 +3,6 @@ var devEnv = require('./dev.env')
 
 module.exports = merge(devEnv, {
   NODE_ENV: '"testing"',
-  CLIENT_ID: '"116bed3e72c3aab96b76"',
-  CALLBACK_URL: '"http://localhost:8080/auth"'
+  CLIENT_ID: '5e8f72ec1e4a789d8632',
+  CALLBACK_URL: 'http://localhost:5000/auth'
 })

client/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="layout-container" class="mdc-theme--background">
     <div id="app">
+      <mdc-linear-progress v-show="loading" class="linear-loader" accent indeterminate></mdc-linear-progress>
       <headegg :scroll0="notScrolled"></headegg>
 
       <drawegg></drawegg>
@@ -9,7 +10,6 @@
         <router-view></router-view>
       </main>
 
-      <mdc-linear-progress v-show="loading" class="loader" accent indeterminate></mdc-linear-progress>
       <page-dialog></page-dialog>
       <block-loader></block-loader>
       <mdc-snackbar :dismisses-on-action="false"/>
@@ -73,13 +73,13 @@ export default {
   height: 100%;
 }
 
-.loader {
+.linear-loader {
   top: 0;
   left: 0;
-  height: 2px;
   width: 100%;
-  position: absolute;
   z-index: 1001;
+  height: 2px !important;
+  position: absolute !important;
 }
 
 #app {

client/src/components/404/index.vue

@@ -0,0 +1,21 @@
+<template>
+<div class="not-found">
+  404 - Not found
+</div>
+</template>
+
+
+<script>
+export default { name: 'not-found' }
+</script>
+
+
+<style scoped>
+.not-found {
+  font-size: 47px;
+  text-align: center;
+  margin: 0 57px;
+  width: 100%;
+  height: 100%;
+}
+</style>

client/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Mainegg from '@/components/main'
+import NotFound from '@/components/404'
 
 Vue.use(Router)
 
@@ -13,8 +14,10 @@ export default new Router({
       component: Mainegg
     }, {
       path: '/auth',
-      name: 'auth',
-      component: Mainegg
+      redirect: { name: 'main' }
+    }, {
+      path: '*',
+      component: NotFound
     }
   ]
 })

oauth-config.js

@@ -1,7 +1,6 @@
 const inquirer = require('inquirer')
 const shell = require('shelljs')
-
-require('dotenv').config()
+const dotenv = require('dotenv')
 
 const setupQuestions = [
   {
@@ -11,13 +10,19 @@ const setupQuestions = [
     choices: [
       'client',
       'server',
-      'start',
-      'vuegg'
+      new inquirer.Separator(),
+      'vuegg:test'
     ]
   }
 ]
 
 inquirer.prompt(setupQuestions).then(answers => {
+  if (answers.runScript === 'vuegg:test') {
+    dotenv.config({path: '.env.test'})
+  } else {
+    dotenv.config({path: '.env.dev'})
+  }
+
   const execCommand = 'CLIENT_ID='.concat(process.env.CLIENT_ID)
     .concat(' CLIENT_SECRET=').concat(process.env.CLIENT_SECRET)
     .concat(' CALLBACK_URL=').concat(process.env.CALLBACK_URL)

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "oauth": "node oauth-config.js",
     "vuegg": "npm run install:all && npm run build && npm run start",
+    "vuegg:test": "npm run build && npm run start",
     "install:all": "npm run install:client && npm run install:server",
     "install:client": "cd client && npm install",
     "install:server": "cd server && npm install",