6 files changed, 191 insertions, 0 deletions
diff --git a/.env.openpower b/.env.openpower
new file mode 100644
index 00000000..26c1c98e
--- /dev/null
+++ b/.env.openpower
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_ENV_NAME=openpower
+\ No newline at end of file
diff --git a/src/env/env.md b/src/env/env.md
new file mode 100644
index 00000000..d1944c50
--- /dev/null
+++ b/src/env/env.md
@@ -0,0 +1,163 @@
+# Configuring environment specific builds
+
+This document provides instructions for how to add environment specific modifications to the Web UI.
+
+- [Setup](##setup)
+- [Store](##store)
+- [Router](##router)
+- [Conditional template rendering](##conditional-template-rendering)
+- [Local development](##local-development)
+- [Production build](##production-build)
+
+## Setup
+
+1. Create a `.env.<ENV_NAME>` file in the project root
+2. Add `NODE_ENV=production` key value pair in the file
+3. Add `VUE_APP_ENV_NAME` key with the value set to the new environment name
+
+Example `.env.openpower`:
+
+```
+NODE_ENV=production
+VUE_APP_ENV_NAME=openpower
+```
+
+## Store
+
+>[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls.
+
+1. 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.
+2. Import the base store
+3. Import environment specific store modules
+4. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule` and `unregisterModule` instance methods to add/remove store modules
+5. Add default export
+
+Example `src/env/store/openpower.js`:
+
+```
+import store from '@/store; //@ aliases to src directory
+import HmcStore from './Hmc/HmcStore';
+
+store.registerModule('hmc', HmcStore);
+
+export default store;
+```
+
+## Router
+
+>[Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI.
+
+1. 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.
+2. 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/openpower.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;
+```
+
+## Conditional template rendering
+
+For features that show or hide chunks of code in the template/markup, use the src/`envConstants.js` file, to determine which features are enabled/disabled depending on the `VUE_APP_ENV_NAME` value.
+
+>Avoid complex v-if/v-else logic in the templates. If a template is being **heavily** modified, consider creating a separate View and [updating the router definition](##router).
+
+1. Add the environment specific feature name and value in the `envConstants.js` file
+2. Import the ENV_CONSTANTS object in the component needing conditional rendering
+3. Use v-if/else as needed in the component template
+
+Example for adding conditional navigation item to AppNavigation.vue component:
+
+`src/envConstants.js`
+
+```
+const envName = process.env.VUE_APP_ENV_NAME;
+
+export const ENV_CONSTANTS = {
+  name: envName || 'openbmc',
+  hmcEnabled: envName === 'openpower' ? true : false
+};
+
+```
+
+`src/components/AppNavigation/AppNavigation.vue`
+
+
+```
+<template>
+
+...
+
+  <b-nav-item
+    to="/access-control/hmc"
+    v-if="hmcEnabled">
+    HMC
+  </b-nav-item>
+
+...
+
+</template>
+
+<script>
+import { ENV_CONSTANTS } from '@/envConstants.js';
+
+export default {
+  data() {
+    return {
+      hmcEnabled: ENV_CONSTANTS.hmcEnabled
+    }
+  }
+}
+
+</script>
+
+```
+
+## Local development
+
+1. Add the same `VUE_APP_ENV_NAME` key value pair to your `env.development.local` file.
+2. Use serve script
+    ```
+    npm run serve
+    ```
+
+## Production build
+
+Run npm build script with vue-cli `--mode` [option flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires [corresponding .env file to exist](##setup).
+
+
+```
+npm run build -- --mode openpower
+```
+
+
+**OR**
+
+pass env variable directly to script
+
+```
+VUE_APP_ENV_NAME=openpower npm run build
+```
+\ No newline at end of file
diff --git a/src/env/router/openpower.js b/src/env/router/openpower.js
new file mode 100644
index 00000000..dccb2de5
--- /dev/null
+++ b/src/env/router/openpower.js
@@ -0,0 +1,6 @@
+import router from '@/router';
+
+// Use router.addRoutes() to add layer specific routes
+// https://router.vuejs.org/api/#router-addroutes
+
+export default router;
diff --git a/src/env/store/openpower.js b/src/env/store/openpower.js
new file mode 100644
index 00000000..70c9b98a
--- /dev/null
+++ b/src/env/store/openpower.js
@@ -0,0 +1,7 @@
+import store from '@/store';
+
+// Use store.registerModule() to register env specific
+// store modules
+// https://vuex.vuejs.org/api/#registermodule
+
+export default store;
diff --git a/src/envConstants.js b/src/envConstants.js
new file mode 100644
index 00000000..f9a4c3c6
--- /dev/null
+++ b/src/envConstants.js
@@ -0,0 +1,5 @@
+const envName = process.env.VUE_APP_ENV_NAME;
+
+export const ENV_CONSTANTS = {
+  name: envName || 'openbmc'
+};
diff --git a/vue.config.js b/vue.config.js
index 12a723d6..882944fa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,6 +26,8 @@ module.exports = {
   },
   productionSourceMap: false,
   configureWebpack: config => {
+    const envName = process.env.VUE_APP_ENV_NAME;
+
     if (process.env.NODE_ENV === 'production') {
       config.plugins.push(
         new CompressionPlugin({
@@ -33,6 +35,12 @@ module.exports = {
         })
       );
     }
+    if (envName !== undefined) {
+      // Resolve store and router modules in src/main.js
+      // depending on environment (VUE_APP_ENV_NAME) variable
+      config.resolve.alias['./store$'] = `./env/store/${envName}.js`;
+      config.resolve.alias['./router$'] = `./env/router/${envName}.js`;
+    }
   },
   chainWebpack: config => {
     if (process.env.NODE_ENV === 'production') {