docs/development/web-ui.md

3 **Document Purpose:** How to customize, build, and run the OpenBMC Web UI
9 ## Webui-vue
11 The [webui-vue](https://github.com/openbmc/webui-vue) repository will replace
12 phosphor-webui once it is deprecated. Webui-vue uses the
16 Visit [README.md](https://github.com/openbmc/webui-vue/blob/master/README.md) to
21 [CONTRIBUTING.md](https://github.com/openbmc/webui-vue/blob/master/CONTRIBUTING.md)
22 to find information on project set-up, design information, and contributing
25 Visit the [OpenBMC Web UI Style Guide](https://openbmc.github.io/webui-vue/) to
28 - Coding Standards
29 - Guidelines
30 - Unit Testing
31 - Components Usage
32 - Quick Start References
35 [OpenBMC Web UI Themes Guide - How to customize](https://openbmc.github.io/webui-vue/customization/…
39 - Routing
40 - Navigation
41 - State Store
42 - Theming
44 ### Load Web UI against QEMU
46 Connect to Web UI in QEMU
48 1. You will need the QEMU session running per instructions in the "Download and
49    Start QEMU Session" section of
50    [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md).
52 2. Assuming you used the default of 2443 for the HTTPS port in your QEMU
59 connect. OpenBMC is running with a self-signed SSL certificate.
61 ## Phosphor-webui
63 The [phosphor-webui](https://github.com/openbmc/phosphor-webui) repository
64 provides a web-based interface for an OpenBMC. It uses the
70 [how to customize phosphor-webui](#customize-phosphor-webui).
72 Phosphor-webui was built on AngularJS and AngularJS goes End of Life June
75 ### Customize Phosphor-webui
80    git clone https://github.com/openbmc/phosphor-webui.git
85    Follow the directions in the phosphor-webui
86    [README](https://github.com/openbmc/phosphor-webui/blob/master/README.md) to
89    [dev-environment](https://github.com/openbmc/docs/blob/master/development/dev-environment.md)
95    Kill your npm run from the previous step using Ctrl^C. Grab a png that you
100    wget http://www.pngmart.com/files/3/Free-PNG-Transparent-Image.png
106    cp Free-PNG-Transparent-Image.png app/assets/images/
112    vi app/login/controllers/login-controller.html
113    # Replace the logo.svg near the top with Free-PNG-Transparent-Image.png
114 …<img src="../../assets/images/Free-PNG-Transparent-Image.png" class="login__logo" alt="OpenBMC log…
120    npm run-script server
132    Similar to the previous step, modify the appropriate HTML for the header:
135    vi app/common/directives/app-header.html
136    # Replace logo.svg with Free-PNG-Transparent-Image.png again
137 …<div class="logo__wrapper"><img src="../../assets/images/Free-PNG-Transparent-Image.png" class="he…
143    npm run-script server
150    your QEMU session by typing the QEMU session (e.g. localhost:2443) in the
158 And that's it! You've downloaded, customized, and run the OpenBMC phosphor-webui