blob: d1944c508022bc66ea137bda3c20455378655f7e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
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
```
|
