webui

Hanzo Ingress Web UI

Access to Hanzo Ingress Web UI, ex: http://localhost:8080

Interface

Hanzo Ingress Web UI provides 2 types of information:

• Providers with their backends and frontends information.
• Health of the web server.

How to build (for backend developer)

Use the Makefile :

make build-image                # Generate Docker image.
make clean-webui generate-webui # Generate static contents in `webui/static/` folder.

How to build (only for frontend developer)

• prerequisite: Node 24 pnpm

• Go to the webui/ directory

• To install dependencies:

  • pnpm install

• Build static Web UI:

  • pnpm build

• Static contents are built in the webui/static/ directory

Do not manually change the files in the webui/static/ directory

The build allows to:

• optimize all JavaScript
• optimize all CSS
• add vendor prefixes to CSS (cross-browser support)
• add a hash in the file names to prevent browser cache problems
• optimize all images at build time
• bundle JavaScript in one file

How to edit (only for frontend developer)

Do not manually change the files in the webui/static/ directory

• Go to the webui/ directory
• Edit files in webui/src/
• Create and populate the .env file using the values inside .env.sample file.
• Run in development mode :
  • pnpm dev
• The application will be available at http://localhost:3000/. On development mode, the application will run with mocked data served by Mock Service Worker.

How to run tests

• Execute the following commands:
  • pnpm test
  • or pnpm test:watch if you want them in watch mode

Libraries

• Node
• pnpm
• React
• Vite
• Vitest
• Mock Service Worker