Create separate file for Vue Router routes

Separating routes into its own JS file to allow for easier env
customizations.
Update store resolve path to make sure right env stores modules
are imported in every file.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5c646c81fab54085198b2e179be80c954258f51c

7 files changed, 282 insertions, 308 deletions

diff --git a/src/env/env.md b/src/env/env.md
index 8d53b023..e315109d 100644
--- a/src/env/env.md
+++ b/src/env/env.md
@@ -25,11 +25,11 @@ VUE_APP_ENV_NAME=ibm
 
 ## Store
 
->[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls.
+> [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls.
 
 1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/store`
-    >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file.
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store import in `src/main.js` will resolve to this new file.
 3. Import the base store
 4. Import environment specific store modules
 5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules
@@ -48,39 +48,14 @@ export default store;
 
 ## Router
 
->[Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI.
+> [Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI.
 
 1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/router`
-    >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The router import in `src/main.js` will resolve to this new file.
-3. Import the base router
-4. Use the [Vue Router](https://router.vuejs.org/api/#router-addroutes) `addRoutes` instance method to define new routes
-5. Add default export
-
-Example `src/env/router/ibm.js`:
-
-```
-import router from '@/router'; //@ aliases to src directory
-import AppLayout from '@/layouts/AppLayout';
-
-router.addRoutes([
-  {
-    path: '/',
-    component: AppLayout,
-    children: [
-      {
-        path: '/access-control/hmc',
-        component: () => import('../views/Hmc'),
-        meta: {
-          title: 'appPageTitle.hmc'
-        }
-      }
-    ]
-  }
-]);
-
-export default router;
-```
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The routes import in `src/router/index.js` will resolve to this new file.
+3. Define new [routes](https://router.vuejs.org/api/#routes).
+    > Use static imports (over lazy-loading routes) to avoid creating separate JS chunks. Static imports also helps to keep the total build size down.
+4. Add default export
 
 ## App navigation
 
@@ -90,7 +65,7 @@ This configuration will make customizations to the rendered markup in src/compon
 
 1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
-    >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file.
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file.
 3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties.
 4. Add default export
 
@@ -100,7 +75,7 @@ This configuration will make customizations to the rendered markup in src/compon
 
 1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file.
 2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
-    >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name.
+    > The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The webpack sass loader will attempt to import a file with this name.
 3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/) for details about [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults) and [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options).
 
 Example for adding custom colors
diff --git a/src/env/router/ibm.js b/src/env/router/ibm.js
index dccb2de5..3a25650f 100644
--- a/src/env/router/ibm.js
+++ b/src/env/router/ibm.js
@@ -1,6 +1,3 @@
-import router from '@/router';
+import routes from '@/router/routes';
 
-// Use router.addRoutes() to add layer specific routes
-// https://router.vuejs.org/api/#router-addroutes
-
-export default router;
+export default routes;
diff --git a/src/env/router/intel.js b/src/env/router/intel.js
index dccb2de5..3a25650f 100644
--- a/src/env/router/intel.js
+++ b/src/env/router/intel.js
@@ -1,6 +1,3 @@
-import router from '@/router';
+import routes from '@/router/routes';
 
-// Use router.addRoutes() to add layer specific routes
-// https://router.vuejs.org/api/#router-addroutes
-
-export default router;
+export default routes;
diff --git a/src/router/index.js b/src/router/index.js
index 68340452..6db80b70 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,258 +1,10 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import store from '../store/index';
-import AppLayout from '../layouts/AppLayout.vue';
-import LoginLayout from '@/layouts/LoginLayout';
-import ConsoleLayout from '@/layouts/ConsoleLayout.vue';
-import Overview from '@/views/Overview';
-import ProfileSettings from '@/views/ProfileSettings';
-import EventLogs from '@/views/Health/EventLogs';
-import HardwareStatus from '@/views/Health/HardwareStatus';
-import Sensors from '@/views/Health/Sensors';
-import Ldap from '@/views/AccessControl/Ldap';
-import LocalUserManagement from '@/views/AccessControl/LocalUserManagement';
-import SslCertificates from '@/views/AccessControl/SslCertificates';
-import DateTimeSettings from '@/views/Configuration/DateTimeSettings';
-import Firmware from '@/views/Configuration/Firmware';
-import Kvm from '@/views/Control/Kvm';
-import ManagePowerUsage from '@/views/Control/ManagePowerUsage';
-import NetworkSettings from '@/views/Configuration/NetworkSettings';
-import PageNotFound from '@/views/PageNotFound';
-import RebootBmc from '@/views/Control/RebootBmc';
-import ServerLed from '@/views/Control/ServerLed';
-import SerialOverLan from '@/views/Control/SerialOverLan';
-import ServerPowerOperations from '@/views/Control/ServerPowerOperations';
-import Unauthorized from '@/views/Unauthorized';
-import Login from '@/views/Login';
-import ChangePassword from '@/views/ChangePassword';
-import SerialOverLanConsole from '@/views/Control/SerialOverLan/SerialOverLanConsole';
-import KvmConsole from '@/views/Control/Kvm/KvmConsole';
-import VirtualMedia from '@/views/Control/VirtualMedia';
+import store from '../store';
+import routes from './routes';
 
 Vue.use(VueRouter);
 
-// Meta title is translated using i18n in App.vue and PageTitle.Vue
-// Example meta: {title: 'appPageTitle.overview'}
-const routes = [
-  {
-    path: '/login',
-    component: LoginLayout,
-    children: [
-      {
-        path: '',
-        name: 'login',
-        component: Login,
-        meta: {
-          title: 'appPageTitle.login'
-        }
-      },
-      {
-        path: '/change-password',
-        name: 'change-password',
-        component: ChangePassword,
-        meta: {
-          title: 'appPageTitle.changePassword',
-          requiresAuth: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/console',
-    component: ConsoleLayout,
-    meta: {
-      requiresAuth: true
-    },
-    children: [
-      {
-        path: 'serial-over-lan-console',
-        name: 'serial-over-lan-console',
-        component: SerialOverLanConsole,
-        meta: {
-          title: 'appPageTitle.serialOverLan'
-        }
-      },
-      {
-        path: 'kvm',
-        name: 'kvm-console',
-        component: KvmConsole,
-        meta: {
-          title: 'appPageTitle.kvm'
-        }
-      }
-    ]
-  },
-  {
-    path: '/',
-    meta: {
-      requiresAuth: true
-    },
-    component: AppLayout,
-    children: [
-      {
-        path: '',
-        name: 'overview',
-        component: Overview,
-        meta: {
-          title: 'appPageTitle.overview'
-        }
-      },
-      {
-        path: '/profile-settings',
-        name: 'profile-settings',
-        component: ProfileSettings,
-        meta: {
-          title: 'appPageTitle.profileSettings'
-        }
-      },
-      {
-        path: '/health/event-logs',
-        name: 'event-logs',
-        component: EventLogs,
-        meta: {
-          title: 'appPageTitle.eventLogs'
-        }
-      },
-      {
-        path: '/health/hardware-status',
-        name: 'hardware-status',
-        component: HardwareStatus,
-        meta: {
-          title: 'appPageTitle.hardwareStatus'
-        }
-      },
-      {
-        path: '/health/sensors',
-        name: 'sensors',
-        component: Sensors,
-        meta: {
-          title: 'appPageTitle.sensors'
-        }
-      },
-      {
-        path: '/access-control/ldap',
-        name: 'ldap',
-        component: Ldap,
-        meta: {
-          title: 'appPageTitle.ldap'
-        }
-      },
-      {
-        path: '/access-control/local-user-management',
-        name: 'local-users',
-        component: LocalUserManagement,
-        meta: {
-          title: 'appPageTitle.localUserManagement'
-        }
-      },
-      {
-        path: '/access-control/ssl-certificates',
-        name: 'ssl-certificates',
-        component: SslCertificates,
-        meta: {
-          title: 'appPageTitle.sslCertificates'
-        }
-      },
-      {
-        path: '/configuration/date-time-settings',
-        name: 'date-time-settings',
-        component: DateTimeSettings,
-        meta: {
-          title: 'appPageTitle.dateTimeSettings'
-        }
-      },
-      {
-        path: '/configuration/firmware',
-        name: 'firmware',
-        component: Firmware,
-        meta: {
-          title: 'appPageTitle.firmware'
-        }
-      },
-      {
-        path: '/control/kvm',
-        name: 'kvm',
-        component: Kvm,
-        meta: {
-          title: 'appPageTitle.kvm'
-        }
-      },
-      {
-        path: '/control/manage-power-usage',
-        name: 'manage-power-usage',
-        component: ManagePowerUsage,
-        meta: {
-          title: 'appPageTitle.managePowerUsage'
-        }
-      },
-      {
-        path: '/configuration/network-settings',
-        name: 'network-settings',
-        component: NetworkSettings,
-        meta: {
-          title: 'appPageTitle.networkSettings'
-        }
-      },
-      {
-        path: '/control/reboot-bmc',
-        name: 'reboot-bmc',
-        component: RebootBmc,
-        meta: {
-          title: 'appPageTitle.rebootBmc'
-        }
-      },
-      {
-        path: '/control/server-led',
-        name: 'server-led',
-        component: ServerLed,
-        meta: {
-          title: 'appPageTitle.serverLed'
-        }
-      },
-      {
-        path: '/control/serial-over-lan',
-        name: 'serial-over-lan',
-        component: SerialOverLan,
-        meta: {
-          title: 'appPageTitle.serialOverLan'
-        }
-      },
-      {
-        path: '/control/server-power-operations',
-        name: 'server-power-operations',
-        component: ServerPowerOperations,
-        meta: {
-          title: 'appPageTitle.serverPowerOperations'
-        }
-      },
-      {
-        path: '/control/virtual-media',
-        name: 'virtual-media',
-        component: VirtualMedia,
-        meta: {
-          title: 'appPageTitle.virtualMedia'
-        }
-      },
-      {
-        path: '/unauthorized',
-        name: 'unauthorized',
-        component: Unauthorized,
-        meta: {
-          title: 'appPageTitle.unauthorized'
-        }
-      },
-      {
-        path: '*',
-        name: 'page-not-found',
-        component: PageNotFound,
-        meta: {
-          title: 'appPageTitle.pageNotFound'
-        }
-      }
-    ]
-  }
-];
-
 const router = new VueRouter({
   base: process.env.BASE_URL,
   routes,
diff --git a/src/router/routes.js b/src/router/routes.js
new file mode 100644
index 00000000..d187713a
--- /dev/null
+++ b/src/router/routes.js
@@ -0,0 +1,251 @@
+import AppLayout from '@/layouts/AppLayout.vue';
+import ChangePassword from '@/views/ChangePassword';
+import ConsoleLayout from '@/layouts/ConsoleLayout.vue';
+import DateTimeSettings from '@/views/Configuration/DateTimeSettings';
+import EventLogs from '@/views/Health/EventLogs';
+import Firmware from '@/views/Configuration/Firmware';
+import HardwareStatus from '@/views/Health/HardwareStatus';
+import Kvm from '@/views/Control/Kvm';
+import KvmConsole from '@/views/Control/Kvm/KvmConsole';
+import Ldap from '@/views/AccessControl/Ldap';
+import LocalUserManagement from '@/views/AccessControl/LocalUserManagement';
+import Login from '@/views/Login';
+import LoginLayout from '@/layouts/LoginLayout';
+import ManagePowerUsage from '@/views/Control/ManagePowerUsage';
+import NetworkSettings from '@/views/Configuration/NetworkSettings';
+import Overview from '@/views/Overview';
+import PageNotFound from '@/views/PageNotFound';
+import ProfileSettings from '@/views/ProfileSettings';
+import RebootBmc from '@/views/Control/RebootBmc';
+import Sensors from '@/views/Health/Sensors';
+import SerialOverLan from '@/views/Control/SerialOverLan';
+import SerialOverLanConsole from '@/views/Control/SerialOverLan/SerialOverLanConsole';
+import ServerLed from '@/views/Control/ServerLed';
+import ServerPowerOperations from '@/views/Control/ServerPowerOperations';
+import SslCertificates from '@/views/AccessControl/SslCertificates';
+import Unauthorized from '@/views/Unauthorized';
+import VirtualMedia from '@/views/Control/VirtualMedia';
+
+// Meta title is translated using i18n in App.vue and PageTitle.Vue
+// Example meta: {title: 'appPageTitle.overview'}
+const routes = [
+  {
+    path: '/login',
+    component: LoginLayout,
+    children: [
+      {
+        path: '',
+        name: 'login',
+        component: Login,
+        meta: {
+          title: 'appPageTitle.login'
+        }
+      },
+      {
+        path: '/change-password',
+        name: 'change-password',
+        component: ChangePassword,
+        meta: {
+          title: 'appPageTitle.changePassword',
+          requiresAuth: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/console',
+    component: ConsoleLayout,
+    meta: {
+      requiresAuth: true
+    },
+    children: [
+      {
+        path: 'serial-over-lan-console',
+        name: 'serial-over-lan-console',
+        component: SerialOverLanConsole,
+        meta: {
+          title: 'appPageTitle.serialOverLan'
+        }
+      },
+      {
+        path: 'kvm',
+        name: 'kvm-console',
+        component: KvmConsole,
+        meta: {
+          title: 'appPageTitle.kvm'
+        }
+      }
+    ]
+  },
+  {
+    path: '/',
+    meta: {
+      requiresAuth: true
+    },
+    component: AppLayout,
+    children: [
+      {
+        path: '',
+        name: 'overview',
+        component: Overview,
+        meta: {
+          title: 'appPageTitle.overview'
+        }
+      },
+      {
+        path: '/profile-settings',
+        name: 'profile-settings',
+        component: ProfileSettings,
+        meta: {
+          title: 'appPageTitle.profileSettings'
+        }
+      },
+      {
+        path: '/health/event-logs',
+        name: 'event-logs',
+        component: EventLogs,
+        meta: {
+          title: 'appPageTitle.eventLogs'
+        }
+      },
+      {
+        path: '/health/hardware-status',
+        name: 'hardware-status',
+        component: HardwareStatus,
+        meta: {
+          title: 'appPageTitle.hardwareStatus'
+        }
+      },
+      {
+        path: '/health/sensors',
+        name: 'sensors',
+        component: Sensors,
+        meta: {
+          title: 'appPageTitle.sensors'
+        }
+      },
+      {
+        path: '/access-control/ldap',
+        name: 'ldap',
+        component: Ldap,
+        meta: {
+          title: 'appPageTitle.ldap'
+        }
+      },
+      {
+        path: '/access-control/local-user-management',
+        name: 'local-users',
+        component: LocalUserManagement,
+        meta: {
+          title: 'appPageTitle.localUserManagement'
+        }
+      },
+      {
+        path: '/access-control/ssl-certificates',
+        name: 'ssl-certificates',
+        component: SslCertificates,
+        meta: {
+          title: 'appPageTitle.sslCertificates'
+        }
+      },
+      {
+        path: '/configuration/date-time-settings',
+        name: 'date-time-settings',
+        component: DateTimeSettings,
+        meta: {
+          title: 'appPageTitle.dateTimeSettings'
+        }
+      },
+      {
+        path: '/configuration/firmware',
+        name: 'firmware',
+        component: Firmware,
+        meta: {
+          title: 'appPageTitle.firmware'
+        }
+      },
+      {
+        path: '/control/kvm',
+        name: 'kvm',
+        component: Kvm,
+        meta: {
+          title: 'appPageTitle.kvm'
+        }
+      },
+      {
+        path: '/control/manage-power-usage',
+        name: 'manage-power-usage',
+        component: ManagePowerUsage,
+        meta: {
+          title: 'appPageTitle.managePowerUsage'
+        }
+      },
+      {
+        path: '/configuration/network-settings',
+        name: 'network-settings',
+        component: NetworkSettings,
+        meta: {
+          title: 'appPageTitle.networkSettings'
+        }
+      },
+      {
+        path: '/control/reboot-bmc',
+        name: 'reboot-bmc',
+        component: RebootBmc,
+        meta: {
+          title: 'appPageTitle.rebootBmc'
+        }
+      },
+      {
+        path: '/control/server-led',
+        name: 'server-led',
+        component: ServerLed,
+        meta: {
+          title: 'appPageTitle.serverLed'
+        }
+      },
+      {
+        path: '/control/serial-over-lan',
+        name: 'serial-over-lan',
+        component: SerialOverLan,
+        meta: {
+          title: 'appPageTitle.serialOverLan'
+        }
+      },
+      {
+        path: '/control/server-power-operations',
+        name: 'server-power-operations',
+        component: ServerPowerOperations,
+        meta: {
+          title: 'appPageTitle.serverPowerOperations'
+        }
+      },
+      {
+        path: '/control/virtual-media',
+        name: 'virtual-media',
+        component: VirtualMedia,
+        meta: {
+          title: 'appPageTitle.virtualMedia'
+        }
+      },
+      {
+        path: '/unauthorized',
+        name: 'unauthorized',
+        component: Unauthorized,
+        meta: {
+          title: 'appPageTitle.unauthorized'
+        }
+      },
+      {
+        path: '*',
+        name: 'page-not-found',
+        component: PageNotFound,
+        meta: {
+          title: 'appPageTitle.pageNotFound'
+        }
+      }
+    ]
+  }
+];
+
+export default routes;
diff --git a/src/store/api.js b/src/store/api.js
index 63fd75cb..fa76067c 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -1,6 +1,6 @@
 import Axios from 'axios';
-import router from '../router';
-import store from '@/store';
+import router from '@/router';
+import store from '../store';
 
 const api = Axios.create({
   withCredentials: true
diff --git a/vue.config.js b/vue.config.js
index 53dc6141..ca8e9f08 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -58,22 +58,16 @@ module.exports = {
     const hasCustomAppNav =
       process.env.CUSTOM_APP_NAV === 'true' ? true : false;
 
-    if (process.env.NODE_ENV === 'production') {
-      config.plugins.push(
-        new CompressionPlugin({
-          deleteOriginalAssets: true
-        })
-      );
-    }
-
     if (envName !== undefined) {
       if (hasCustomStore) {
-        // If env has custom store, resolve store module in src/main.js
-        config.resolve.alias['./store$'] = `./env/store/${envName}.js`;
+        // If env has custom store, resolve all store modules. Currently found
+        // in src/router/index.js src/store/api.js and src/main.js
+        config.resolve.alias['./store$'] = `@/env/store/${envName}.js`;
+        config.resolve.alias['../store$'] = `@/env/store/${envName}.js`;
       }
       if (hasCustomRouter) {
-        // If env has custom router, resolve router module in src/main.js
-        config.resolve.alias['./router$'] = `./env/router/${envName}.js`;
+        // If env has custom router, resolve routes in src/router/index.js
+        config.resolve.alias['./routes$'] = `@/env/router/${envName}.js`;
       }
       if (hasCustomAppNav) {
         // If env has custom AppNavigation, resolve AppNavigationMixin module in src/components/AppNavigation/AppNavigation.vue
@@ -82,6 +76,14 @@ module.exports = {
         ] = `@/env/components/AppNavigation/${envName}.js`;
       }
     }
+
+    if (process.env.NODE_ENV === 'production') {
+      config.plugins.push(
+        new CompressionPlugin({
+          deleteOriginalAssets: true
+        })
+      );
+    }
   },
   chainWebpack: config => {
     if (process.env.NODE_ENV === 'production') {