Bandwidth Monitor React UI

This directory contains the React-based user interface for the bwmon project. All instructions below apply only to the UI/frontend part. For backend or server-side setup, see the main project README.

This project was bootstrapped with VITE.

• Getting Started
• @vitejs/plugin-react uses Babel for Fast Refresh

Prerequisites

• Node.js (version 22+ recommended)
• npm (comes with Node.js)

Installation

Install dependencies before running or building the UI:

npm install

Usage

Development

Start the Vite development server:

npm start

Then open http://localhost:3000 in your browser.

Production Build

Build the optimized production bundle:

npm run build

The output will be in the build folder. To preview the build locally, you can use a static server such as serve:

npm install -g serve
serve build

Testing & Quality

Run all tests interactively (UI/unit tests)

npm test

Run all tests once

npm run test:once

Run all tests with coverage

npm run test:coverage

• Coverage report: reports/coverage/lcov-report/index.html

Run Playwright end-to-end tests (UI E2E)

npm run test:e2e

• Playwright report: reports/playwright/html/index.html

Run mutation tests

npm run test:mutation

• Mutation report: reports/mutation/mutation.html

Format code

npm run pretty

Audit for vulnerabilities

npm run audit

Lint code

npm run lint

Versioning

Update the UI package version and create a git tag:

npm version <version number>

---

For questions or contributions, please refer to the main project repository or contact the maintainers.