From 044b1bb84225b96c3c1ab47d7b37398b8649cf9f Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Wed, 12 Aug 2020 14:12:44 -0700 Subject: Add env variable check to improve build customizations Added flags for styles, router, and store. If these flags are set to true, then webpack will attempt to resolve the environment specific files. If these flags are not explicitly set to true, the default files are used. This will give us more flexibility and remove the need to create empty env files (eg env/router/ibm.js). Signed-off-by: Yoshie Muranaka Change-Id: I552ad402621a3bbad3e871076a894ecadf9e82c7 --- src/env/env.md | 21 ++++++++++++--------- vue.config.js | 21 +++++++++++++++------ 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/env/env.md b/src/env/env.md index 92c3f236..191cd045 100644 --- a/src/env/env.md +++ b/src/env/env.md @@ -26,12 +26,13 @@ VUE_APP_ENV_NAME=ibm >[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the application's API calls. -1. Create a `.js` file in `src/env/store` +1. If making customizations to the default store, add `CUSTOM_STORE=true` key value pair to the new .env file. +2. Create a `.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 +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 +6. Add default export Example `src/env/store/ibm.js`: @@ -48,9 +49,10 @@ export default store; >[Vue Router](https://router.vuejs.org/guide/) determines which pages are accessible in the UI. -1. Create a `.js` file in `src/env/router` +1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key value pair to the new .env file. +2. Create a `.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 +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 @@ -83,9 +85,10 @@ export default router; >[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations. -1. Create a `_.scss` partial in `src/env/assets/styles` +1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key value pair to the new .env file. +2. Create a `_.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. -2. 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). +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/vue.config.js b/vue.config.js index 81763622..1e17def0 100644 --- a/vue.config.js +++ b/vue.config.js @@ -6,7 +6,9 @@ module.exports = { sass: { prependData: () => { const envName = process.env.VUE_APP_ENV_NAME; - if (envName !== undefined) { + const hasCustomStyles = + process.env.CUSTOM_STYLES === 'true' ? true : false; + if (hasCustomStyles && envName !== undefined) { // If there is an env name defined, import Sass // overrides. // It is important that these imports stay in this @@ -14,7 +16,7 @@ module.exports = { // take precedence over the default BMC styles return ` @import "@/assets/styles/bmc/helpers"; - @import "@/env/assets/styles/_${process.env.VUE_APP_ENV_NAME}"; + @import "@/env/assets/styles/_${envName}"; @import "@/assets/styles/bootstrap/_helpers"; `; } else { @@ -51,6 +53,8 @@ module.exports = { productionSourceMap: false, configureWebpack: config => { const envName = process.env.VUE_APP_ENV_NAME; + const hasCustomStore = process.env.CUSTOM_STORE === 'true' ? true : false; + const hasCustomRouter = process.env.CUSTOM_ROUTER === 'true' ? true : false; if (process.env.NODE_ENV === 'production') { config.plugins.push( @@ -59,11 +63,16 @@ 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`; + if (hasCustomStore) { + // If env has custom store, resolve store module in src/main.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`; + } } }, chainWebpack: config => { -- cgit v1.2.3