Configuring environment specific builds

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

• Setup
• Store
• Router
• Conditional template rendering
• 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;

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.

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