Files

root d7d341f752 Update npm packages to latest versions

Fix JavaScript sourcemap paths to show full file locations
Implement --build-debug flag and complete Build UI streaming
Add xterm.js terminal UI and fix asset path routing
Add RSpade Build UI service with WebSocket support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-31 08:12:33 +00:00

2.0 KiB

Executable File

Raw Blame History

RSpade BuildUI Component

Overview

The BuildUI component provides real-time visibility into RSpade's manifest and bundle compilation processes during development. When the framework detects that a rebuild is needed, developers see a live terminal interface showing compilation progress via WebSocket streaming.

Architecture

Node.js Service (`resource/build-service/`)

A standalone Express + WebSocket server that:

Runs on ports 3100 (HTTP) and 3101 (WebSocket)
Managed by supervisord in development environment
Auto-reloads on code changes via webpack watch + nodemon
Streams build process output to connected clients
Shares single build process across multiple browser connections

Integration Points

ManifestKernel - Detects rebuild needs, redirects to build UI
BundleCompiler - Triggers compilation, streams output
Nginx - Routes /_build/ to Node.js service
Supervisord - Keeps service running, auto-restarts

Development Setup

The service is designed for zero-setup in the Docker development environment:

Supervisord automatically starts the service
Webpack watch rebuilds frontend on changes
Nodemon restarts server on backend changes
Changes to any file in /system/app/RSpade/BuildUI/ trigger reload

Ports

3100 - HTTP server (UI and API endpoints)
3101 - WebSocket server (real-time communication)

Service Commands

# Start development mode (auto-reload)
cd /var/www/html/system/app/RSpade/BuildUI/resource/build-service
npm start

# Manual build
npm run build

# Server only
npm run server

Future Features

See /docs.dev/LIVE_COMPILE_UI_FEATURE_PROJECT_PLAN.md for complete roadmap.

Phase 1 (Current): Hello world WebSocket service Phase 2: Integration with manifest/bundle rebuild detection Phase 3: Terminal UI with xterm.js Phase 4: Build process streaming and shared execution

Security

Development-only feature:

Only runs when APP_ENV=local or APP_DEBUG=true
Not deployed to production
No privileged command execution
Read-only build process output

2.0 KiB Executable File Raw Blame History