DevUI - Development Tools UI

A Tower middleware that adds a /dev/ui route to any HTTP service, serving a React-based development tools interface.

Features

• 🛠️ Tower Middleware: Drop-in middleware for any Tower-compatible HTTP service
• ⚛️ React SPA: Modern React TypeScript single-page application
• 🚀 Axum Integration: Works seamlessly with Axum applications
• 📱 Responsive UI: Modern, clean interface for development tools
• 🔧 Embedded Assets: React app is embedded in the Rust binary at compile time

Quick Start

1. Add to your Cargo.toml

[dependencies]
devui = "0.1.0"
axum = "0.7"
tokio = { version = "1.0", features = ["full"] }

2. Apply the middleware to your Axum app

use axum::{response::Html, routing::get, Router};
use devui::DevUiLayer;
use tower::ServiceBuilder;

#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/", get(|| async { Html("<h1>My App</h1>") }))
        .layer(ServiceBuilder::new().layer(DevUiLayer::new()));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

3. Access your development tools

• Main app: http://localhost:3000/
• DevUI: http://localhost:3000/dev/ui

Example

Run the included example:

cargo run --example axum_server

Then visit:

• http://localhost:3000/ - Your main application
• http://localhost:3000/dev/ui - Development tools interface

How it works

The DevUiLayer middleware:

1. Intercepts requests to /dev/ui
2. Serves the React SPA for non-API routes
3. Handles API endpoints for backend communication
4. Passes through all other requests to your application

Architecture

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   HTTP Request  │───▶│   DevUiLayer    │───▶│  Your Service   │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                              │
                              ▼
                       ┌──────────────────┐
                       │  React SPA       │
                       │  /dev/ui route   │
                       │  + API endpoints │
                       └──────────────────┘

Available Development Tools

PostgreSQL SQL Management

Comprehensive PostgreSQL database management - Explore, query, and manage PostgreSQL databases with a rich set of features:

• 🗄️ Schema Exploration: Automatic discovery of tables, columns, and relationships
• 🔍 Advanced Filtering: Type-aware filters with support for all PostgreSQL data types
• 🔗 Foreign Key Navigation: One-click navigation through foreign key relationships
• 📄 Pagination: Efficient server-side pagination for large datasets
• 🎨 Modern UI: Responsive interface with rich metadata display

📖 See full PostgreSQL features documentation

Kafka Management

• Kafka UI: Monitor Kafka topics and messages
• Produce/Consume: Test message production and consumption
• Cluster Management: Manage Kafka cluster configurations

Future Development Tools

The interface is designed to be extensible with tools like:

• API Explorer: Test and explore API endpoints
• Log Viewer: View and search application logs
• Metrics Dashboard: Monitor application performance

Development

For hot module reloading during development, see DEVELOPMENT.md.

Quick Development Setup

# Install frontend dependencies
make frontend-install

# Build the entire project (frontend + backend)
make build

# Start development server with hot reloading
make dev

Frontend Development

For React development with hot reloading:

# Start frontend development server
make frontend-dev

License

MIT