xref: /openbmc/webui-vue/README.md (revision ce9a3ef3036923cb4c0f28240c8bb37a6b4540fc)
1# webui-vue
2
3webui-vue is a web-based user interface for the OpenBMC firmware stack built on
4[Vue.js](https://vuejs.org/).
5
6## Hold on... What happened to phosphor-webui?
7
8[phosphor-webui](https://github.com/openbmc/phosphor-webui) was built on
9AngularJS and [AngularJS goes End of Life](https://www.convective.com/angularjs-end-of-life/)
10June 30, 2021, so this repository is hopefully its replacement. At this time,
11phosphor-webui still contains more features and you should consider using it.
12
13## When will this new Vue.js application reach feature parity with phosphor-webui?
14
15The current plan is by the end of June 2020, with exception to the following pages:
16- Firmware
17- SNMP settings
18- KVM
19- Virtual media
20
21## Why will this application be better?
22
23As mentioned, this application is built using Vue.js, a modern open-source
24Model-View-ViewModel JavaScript framework supported by an active community and
25strong documentation. It has been architected to allow organizations to easily
26update the theme to support their brand. This rewrite takes advantage of
27front-end development best practices and does not suffer from some of the
28anti-patterns that exist in phosphor-webui today.
29
30## How can I get involved?
31
32Visit the [CONTRIBUTING.md](CONTRIBUTING.md) for more on how to contribute code,
33review some code in
34[Gerrit](https://gerrit.openbmc-project.xyz/q/project:openbmc%252Fwebui-vue+status:open),
35or join us in the
36[GUI design workgroup meeting](https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group).
37
38## Project setup
39
40### Install Dependencies
41```
42npm install
43```
44### Create a .env file
451. Create the following file in the root directory
46     - .env.development.local
471. Add the following environment variable
48    - BASE_URL="https://<BMC IP address or FQDN>"`
49
50
51## Compiles and hot-reloads for development
52
53```
54npm run serve
55```
56
57## Compiles and minifies for production
58
59```
60npm run build
61```
62
63## Run your unit tests
64
65```
66npm run test:unit
67```
68
69## Lints and fixes files
70
71```
72npm run lint
73```
74
75## Customize configuration
76
77See [Configuration Reference](https://cli.vuejs.org/config/).
78
79## Documentation
80The documentation for coding standards and components is located in the `docs` directory. It is created using the [VuePress](https://vuepress.vuejs.org/) static site generator. Information about how to write documentation can be found on the [VuePress website](https://vuepress.vuejs.org/).
81
82### Running Locally
83```
84Run npm docs:serve
85```
86