diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-05 18:42:34 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-04-25 00:47:57 +0300 |
commit | 9e36f522b94511c1d77335493c09e68975db031c (patch) | |
tree | ff5295573800c6b6f34fdae28ac9a37b44b1029b | |
parent | 3111b6fa81cea34c6933491ace636f4fdd1dade3 (diff) | |
download | webui-vue-9e36f522b94511c1d77335493c09e68975db031c.tar.xz |
Add webpack config for env specific builds
Add documentation and example files to make environment specific
build modifications.
- Store any env specific router and store modules in
separate env directory
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I06ff3cb0928707354266dd25b399710847e7fa18
-rw-r--r-- | .env.openpower | 2 | ||||
-rw-r--r-- | src/env/env.md | 163 | ||||
-rw-r--r-- | src/env/router/openpower.js | 6 | ||||
-rw-r--r-- | src/env/store/openpower.js | 7 | ||||
-rw-r--r-- | src/envConstants.js | 5 | ||||
-rw-r--r-- | vue.config.js | 8 |
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') { |