(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{401:function(e,t,a){"use strict";a.r(t);var o=a(41),s=Object(o.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"build-customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-customization"}},[e._v("#")]),e._v(" Build Customization")]),e._v(" "),a("p",[e._v("This document provides instructions for how to add environment specific\nmodifications to the Web UI.")]),e._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"#setup"}},[e._v("Setup")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[e._v("Store")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#router"}},[e._v("Router")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#app-navigation"}},[e._v("App Navigation")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#theming"}},[e._v("Theming")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#local-development"}},[e._v("Local development")])]),e._v(" "),a("li",[a("a",{attrs:{href:"#production-build"}},[e._v("Production build")])])]),e._v(" "),a("h2",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),a("ol",[a("li",[e._v("Create a "),a("code",[e._v(".env.<ENV_NAME>")]),e._v(" file in the project root")]),e._v(" "),a("li",[e._v("Add "),a("code",[e._v("NODE_ENV=production")]),e._v(" key value pair in the file")]),e._v(" "),a("li",[e._v("Add "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" key with the value set to the new environment name")])]),e._v(" "),a("p",[e._v("Example "),a("code",[e._v(".env.ibm")]),e._v(":")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("NODE_ENV=production\nVUE_APP_ENV_NAME=ibm\n")])])]),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[e._v("#")]),e._v(" Store")]),e._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://vuex.vuejs.org/guide/modules.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuex store modules"),a("OutboundLink")],1),e._v(" contain the\napplication's API calls.")])]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the default store, add "),a("code",[e._v("CUSTOM_STORE=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("<ENV_NAME>.js")]),e._v(" file in "),a("code",[e._v("src/env/store")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The store import in "),a("code",[e._v("src/main.js")]),e._v(" will resolve to this new\nfile.")])])]),e._v(" "),a("li",[e._v("Import the base store")]),e._v(" "),a("li",[e._v("Import environment specific store modules")]),e._v(" "),a("li",[e._v("Use the "),a("a",{attrs:{href:"https://vuex.vuejs.org/api/#registermodule",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuex"),a("OutboundLink")],1),e._v(" "),a("code",[e._v("registerModule")]),e._v("\nand "),a("code",[e._v("unregisterModule")]),e._v(" instance methods to add/remove store modules")]),e._v(" "),a("li",[e._v("Add default export")])]),e._v(" "),a("p",[e._v("Example "),a("code",[e._v("src/env/store/ibm.js")]),e._v(":")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("import store from '@/store; //@ aliases to src directory\nimport HmcStore from './Hmc/HmcStore';\n\nstore.registerModule('hmc', HmcStore);\n\nexport default store;\n")])])]),a("h2",{attrs:{id:"router"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#router"}},[e._v("#")]),e._v(" Router")]),e._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://router.vuejs.org/guide/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue Router"),a("OutboundLink")],1),e._v(" determines which pages are\naccessible in the UI.")])]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the default router, add "),a("code",[e._v("CUSTOM_ROUTER=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("<ENV_NAME>.js")]),e._v(" file in "),a("code",[e._v("src/env/router")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The routes import in "),a("code",[e._v("src/router/index.js")]),e._v(" will resolve to this\nnew file.")])])]),e._v(" "),a("li",[e._v("Define new "),a("a",{attrs:{href:"https://router.vuejs.org/api/#routes",target:"_blank",rel:"noopener noreferrer"}},[e._v("routes"),a("OutboundLink")],1),e._v("."),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[e._v("Use static imports (over lazy-loading routes) to avoid creating separate\nJS chunks. Static imports also helps to keep the total build size down.")])])]),e._v(" "),a("li",[e._v("Add default export")])]),e._v(" "),a("h2",{attrs:{id:"app-navigation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-navigation"}},[e._v("#")]),e._v(" App navigation")]),e._v(" "),a("p",[e._v("The Vue Router definition is closely tied to the app navigation but should be\nconfigured separately. The Vue Router is responsible for defining the\napplication routes which is not always the same as what is visible in the app\nnavigation. This configuration will make customizations to the rendered markup\nin src/components/AppNavigation/AppNavigation.vue.")]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the app navigation, add "),a("code",[e._v("CUSTOM_APP_NAV=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("<ENV_NAME>.js")]),e._v(" file in "),a("code",[e._v("src/env/components/AppNavigation")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The AppNavigationMixin import in\n"),a("code",[e._v("src/components/AppNavigation/AppNavigation.vue")]),e._v(" will resolve to this new\nfile.")])])]),e._v(" "),a("li",[e._v("Your custom mixin should follow a very similar structure to the default\nAppNavigationMixin.js file. It should include a data property named\n"),a("code",[e._v("navigationItems")]),e._v(" that should be an array of of navigation objects. Each\nnavigation object should have an "),a("code",[e._v("id")]),e._v(" and "),a("code",[e._v("label")]),e._v(" property defined.\nOptionally it can include "),a("code",[e._v("icon")]),e._v(", "),a("code",[e._v("route")]),e._v(", or "),a("code",[e._v("children")]),e._v(" properties.")]),e._v(" "),a("li",[e._v("Add default export")])]),e._v(" "),a("h2",{attrs:{id:"theming"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theming"}},[e._v("#")]),e._v(" Theming")]),e._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[e._v("TIP")]),e._v(" "),a("p",[a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Bootstrap theming"),a("OutboundLink")],1),e._v("\nallows for easy visual customizations.")])]),e._v(" "),a("ol",[a("li",[e._v("If making customizations to the default styles, add "),a("code",[e._v("CUSTOM_STYLES=true")]),e._v(" key\nvalue pair to the new .env file.")]),e._v(" "),a("li",[e._v("Create a "),a("code",[e._v("_<ENV_NAME>.scss")]),e._v(" partial in "),a("code",[e._v("src/env/assets/styles")]),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[e._v("WARNING")]),e._v(" "),a("p",[e._v("The filename needs to match the "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" value defined in the\n.env file. The webpack sass loader will attempt to import a file with this\nname.")])])]),e._v(" "),a("li",[e._v("Add style customizations. Refer to "),a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/",target:"_blank",rel:"noopener noreferrer"}},[e._v("bootstrap documentation"),a("OutboundLink")],1),e._v("\nfor details about "),a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults",target:"_blank",rel:"noopener noreferrer"}},[e._v("color\noverrides"),a("OutboundLink")],1),e._v("\nand "),a("a",{attrs:{href:"https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options",target:"_blank",rel:"noopener noreferrer"}},[e._v("other customizable\noptions"),a("OutboundLink")],1),e._v(".")])]),e._v(" "),a("p",[e._v("Example for adding custom colors")]),e._v(" "),a("p",[a("code",[e._v("src/env/assets/styles/_ibm.scss")])]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("// Custom theme colors\n\n$primary: rebeccapurple;\n$success: lime;\n")])])]),a("h2",{attrs:{id:"local-development"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-development"}},[e._v("#")]),e._v(" Local development")]),e._v(" "),a("ol",[a("li",[e._v("Add the same "),a("code",[e._v("VUE_APP_ENV_NAME")]),e._v(" key value pair to your\n"),a("code",[e._v("env.development.local")]),e._v(" file.")]),e._v(" "),a("li",[e._v("Use serve script"),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("npm run serve\n")])])])])]),e._v(" "),a("h2",{attrs:{id:"production-build"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#production-build"}},[e._v("#")]),e._v(" Production build")]),e._v(" "),a("p",[e._v("Run npm build script with vue-cli "),a("code",[e._v("--mode")]),e._v(" "),a("a",{attrs:{href:"https://cli.vuejs.org/guide/mode-and-env.html#modes",target:"_blank",rel:"noopener noreferrer"}},[e._v("option\nflag"),a("OutboundLink")],1),e._v(". This requires\n"),a("a",{attrs:{href:"#setup"}},[e._v("corresponding .env file to exist")]),e._v(".")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("npm run build -- --mode ibm\n")])])]),a("p",[a("strong",[e._v("OR")])]),e._v(" "),a("p",[e._v("pass env variable directly to script")]),e._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[e._v("VUE_APP_ENV_NAME=ibm npm run build\n")])])])])}),[],!1,null,null,null);t.default=s.exports}}]);