Rust WebUI React Rsbuild Application

A full-stack desktop application combining Rust backend with React frontend using WebUI for native desktop window integration. The architecture follows Model-View-ViewModel (MVVM) pattern with comprehensive error handling, real-time WebSocket communication, and SQLite database integration.

Table of Contents

Core Documentation

1. Getting Started

   • Prerequisites
   • Installation
   • Quick Start
   • Build Options
   • Configuration
   • Troubleshooting

2. Architecture

   • System Overview
   • Backend Architecture
   • Frontend Architecture
   • Communication Patterns
   • Design Decisions

3. Development Guide

   • Environment Setup
   • Development Workflow
   • Code Standards
   • Common Tasks
   • Testing Strategy
   • Debugging

4. API Reference

   • Backend API
   • Frontend API
   • WebSocket Protocol
   • Event System
   • Error Handling

5. Deployment

   • Production Build
   • Distribution
   • Platform-Specific Builds
   • Docker Deployment
   • Monitoring

Additional Documentation

• Architecture Patterns - Core + Plugin-Driven Architecture with MVVM
• Plugin Development Guide - Creating and registering plugins
• Testing Guide - Comprehensive testing strategy
• Architecture Critique - Architecture analysis and remediation
• Errors as Values Guide - Error handling pattern
• Build Resolution - Build troubleshooting
• Implementation Summary - Implementation status

Features

• MVVM Architecture: Clean separation of concerns across backend and frontend
• Plugin System: Extensible plugin architecture for modular functionality
• Real-time Communication: WebSocket-based bidirectional communication
• SQLite Database: Embedded database with sample data management
• Comprehensive Logging: Structured logging with error tracking
• Developer Tools: Built-in devtools panel for debugging and monitoring
• Error Handling: "Errors as Values" pattern with rich context
• Cross-Platform: Build for Linux, macOS, and Windows

Quick Start

# Clone and build
git clone <repository-url>
cd starter-rust-webuireact-rsbuild
./run.sh

Project Structure

starter-rust-webuireact-rsbuild/
├── src/
│   ├── main.rs                 # Application entry point
│   ├── mod.rs                  # Root module declarations
│   ├── core/                   # Domain layer (entities, repositories, services)
│   ├── model/                  # Model layer (configuration, database)
│   ├── viewmodel/              # ViewModel layer (handlers, WebSocket)
│   ├── infrastructure/         # Infrastructure (event bus, logging, serialization)
│   ├── presentation/           # Presentation layer (devtools API)
│   ├── plugins/                # Plugin system
│   ├── error_handling/         # Error handling utilities
│   └── tests/                  # Test suite
│
├── frontend/
│   ├── src/
│   │   ├── views/              # React components
│   │   ├── view-models/        # ViewModels (communication bridge)
│   │   ├── models/             # Data models and event bus
│   │   ├── services/           # Services (error logger, window manager)
│   │   ├── core/               # Core utilities
│   │   └── plugins/            # Frontend plugins
│   ├── package.json
│   ├── tsconfig.json
│   └── biome.json              # Linting and formatting config
│
├── docs/                       # Documentation
├── app.config.toml             # Application configuration
├── Cargo.toml                  # Rust dependencies
├── run.sh                      # Build and run script
└── README.md                   # This file

Technology Stack

Backend

• Language: Rust 2021 Edition
• UI Framework: webui-rs (WebUI 2.5.0)
• Database: SQLite with rusqlite
• Logging: tracing, tracing-subscriber
• Serialization: serde, serde_json
• Async Runtime: tokio
• WebSocket: tokio-tungstenite

Frontend

• Language: TypeScript 5.x
• Framework: React 18
• Build Tool: Rsbuild (Rspack-based)
• Linting: Biome
• Testing: Bun Test
• Window Management: WinBox.js

Build Commands

# Build and run
./run.sh

# Build only
./run.sh --build

# Build frontend only
./run.sh --build-frontend

# Build Rust only
./run.sh --build-rust

# Release build
./run.sh --release

# Clean and rebuild
./run.sh --rebuild

# Clean artifacts
./run.sh --clean

Testing

# Backend tests
cargo test

# Frontend tests
cd frontend && bun test

# All tests
cargo test && cd frontend && bun test

Development Server

# Terminal 1: Backend
cargo watch -x run

# Terminal 2: Frontend
cd frontend && bun run dev

Configuration

Edit app.config.toml:

[app]
name = "Rust WebUI SQLite Demo"
version = "1.0.0"

[database]
path = "app.db"
create_sample_data = true

[window]
title = "Rust WebUI Application"
width = 1200
height = 800

[logging]
level = "info"
file = "application.log"

Ports

Service	Port	Protocol
HTTP Server	8080	HTTP
WebSocket Server	9000	WebSocket

Developer Tools

The application includes a built-in DevTools panel accessible at the bottom of the window:

• Status Tab: System overview and quick metrics
• Metrics Tab: Detailed system metrics (uptime, memory, connections)
• Events Tab: Real-time event stream
• Errors Tab: Error logs with filtering
• Console Tab: JavaScript expression evaluator
• Config Tab: Application configuration
• Debug Tab: Testing utilities

License

MIT License

Contributing

1. Fork the repository
2. Create a feature branch
3. Make changes
4. Run tests: cargo test && cd frontend && bun test
5. Submit pull request

Support

• Documentation: See docs/ directory
• Issues: GitHub Issues
• Architecture: See ARCHITECTURE.md