Configuring environment specific builds

This document provides instructions for how to add environment specific modifications to the Web UI.

• Setup
• Store
• Router
• Theming
• Local development
• 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 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 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 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
3. Use the Vue Router addRoutes instance method to define new routes
4. 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;

Theming

Bootstrap theming allows for easy visual customizations.

1. 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.

2. Add style customizations. Refer to bootstrap documentation for details about variable override options and theme color maps.

Example for adding custom colors

src/env/assets/styles/_openpower.scss

// Custom theme colors
$theme-colors: (
  "primary": rebeccapurple,
  "success": lime
);

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. This requires corresponding .env file to exist.

npm run build -- --mode openpower

OR

pass env variable directly to script

VUE_APP_ENV_NAME=openpower npm run build