webui

Verification Notice: This document is the sole guide for building and testing the webui component. Please follow this document strictly for the verification process. Documents in the docs/ directory are feature specification documents and do not cover the build process. This component currently supports Ubuntu 24.04 LTS and openEuler 24.03 LTS (Kunpeng). Ubuntu 24.04 LTS is recommended. Other systems such as CentOS and Debian are not supported; do not attempt to use alternative images.

webui is the Web frontend component of openUBMC. Based on Vue 3 + Element Plus + OpenDesign V2, it provides a BMC management interface and supports functions such as device monitoring, configuration management, and remote control.

---

Table of Contents

• Repository Address
• System Requirements
• Environment Dependencies
• Build
  • Obtain Component Code
  • Component-level Build
  • Build Parameters
  • Local Development and Debugging
• Testing
• Project Structure
• Technology Stack
• Browser Compatibility
• License

---

Repository Address

https://gitcode.com/openUBMC/webui

---

System Requirements

Item	Requirement
Operating System	Ubuntu 24.04 LTS (this version only)
Chip Architecture	x86-64 (amd64)
Python	>= 3.10 (init.py runtime dependency)
Node.js	>= 18 LTS (frontend development dependency)

Build tools such as bingo and Conan are installed automatically by init.py; no manual preparation is required. Docker containers are recommended for building. You can use the following image to quickly start a development environment:

docker pull swr.cn-north-4.myhuaweicloud.com/openubmc/ubuntu:24.04.2

---

Environment Dependencies

Before building webui, complete the openUBMC development environment initialization (install bingo, Conan, Node.js, configure the Conan remote repository, etc.). For complete initialization steps and common issue troubleshooting, refer to the openUBMC Build Guide. This document covers all operations including container environment setup, init.py execution, and Conan login verification.

Do not install bingo and Conan manually: Manual installation (e.g., pip install conan) will cause Conan remote repository authentication to fail, and bingo build will not be able to pull dependency packages. All build tools must be installed via the manifest repository's init.py process in a single step.

---

Build

Obtain Component Code

Prerequisite: Complete the init.py initialization flow in Environment Dependencies. The bingo and conan commands must be available.

cd /home/workspace
git clone https://gitcode.com/openUBMC/webui.git

Component-level Build

After entering the webui component directory, use bingo to perform the build:

cd /home/workspace/webui

# Default dev stage build
bingo build --stage=dev

# Build and publish to the stable stage
bingo build --stage=stable

# Release type build
bingo build --stage=dev -bt release

Build Parameters

bingo build [-h] [-bt BUILD_TYPE] [--stage STAGE] [-u] [-r REMOTE] [--conan2] [-nc] [-o OPTIONS] [--user USER] [-wb] [--ccache]

Parameter	Description	Default
-bt / --build_type	Build type, options: debug, release	debug
--stage	Package release stage, options: dev, pre, rc, stable	dev
-u / --upload	Upload component package to Conan repository	—
-r / --remote	Conan repository alias	—
--conan2	Force build component with Conan2	—
-nc / --no_cache	Force update Conan cache dependencies	—
-o / --options	Define component option values	—
--user	Specify the user field of the Conan package	openubmc
-wb / --without_build	Do not force source build of the component itself	—
--ccache	Use ccache to accelerate C/C++ compilation	—

Component options supported by webui (the -o parameter):

Option	Description	Default
energy_enabled	Enable energy management	True
ldap_enabled	Enable LDAP authentication	True
three_dui_enabled	Enable 3D UI feature	False
vtpcm_enabled	Enable VTPCM feature	False
webvnc_enabled	Enable Web VNC feature	False

Local Development and Debugging

Frontend development requires installing additional npm dependencies and starting the development server:

# Install npm dependencies
npm install

# Start the development server (default http://localhost:5173)
npm run dev

Development proxy configuration (edit vite.config.ts):

server: {
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, ''),
    },
  },
},

---

Testing

Frontend project testing uses npm:

# Run frontend lint check
npm run lint

# Run TypeScript type check
npx vue-tsc --noEmit

---

Project Structure

webui/
├ src/                  # All business modules
│   ├ api/              # Interface requests and path configuration
│   ├ apps/             # Project submodules
│   ├ assets/           # Styles, images, and other static resources
│   ├ components/       # Common component library
│   ├ data/             # Static data and constants
│   ├ hooks/            # Common composite functions
│   ├ model/            # Interface models and enumerations
│   ├ pages/            # Page views and business logic
│   ├ plugins/          # Plugin registration
│   ├ services/         # Core service logic
│   ├ stores/           # State management (Pinia)
│   ├ utils/            # Common utility functions
│   ├ validators/       # Form validation rules
│   ├ App.vue           # Application root component
│   └ main.ts           # Application entry
│   └ env.d.ts          # Global type declarations
├ mock/                 # Frontend mock service and data
├ public/               # Public static resources
├ types/                # Type definitions and configurations
├ mds/                  # MDS model definitions
├ tests/                # Test-related
├ scripts/              # Build and helper scripts
├ docs/                 # Feature specification documents (not related to build)
├ conanfile.py          # Conan build definition
├ vite.config.ts        # Vite build/proxy/mock configuration
├ package.json          # Project dependencies and scripts
├ tsconfig.json         # TypeScript configuration
├ LICENSE               # Mulan PSL v2 License
 README.md             # This file

---

Technology Stack

Category	Technology
Framework	Vue 3
Component Library	Element Plus + OpenDesign V2
Build Tool	Vite
State Management	Pinia
Code Standards	ESLint + Prettier + TypeScript

---

Browser Compatibility

Browser	Supported Version Range
Edge	98+
Firefox	96+
Chrome	100+
Safari	12 - 15.2

---

License

This project is open-sourced under the Mulan PSL v2 License. For details, see: http://license.coscl.org.cn/MulanPSL2