A powerful web-based configuration and debugging tool for PepperDash Essentials systems. This React application provides real-time system monitoring, configuration management, and troubleshooting capabilities through an intuitive web interface.
New to the application? Start with the Getting Started Tutorial for a guided introduction.
Need to solve a specific problem? Check the How-to Guides for step-by-step solutions.
Setting up the development environment:
# Install dependencies
npm install
# Create a .env.local file in the project root with your target processor:
# PROGRAM_HOST=https://your-processor-ip
# VITE_PROGRAM_ID=app01
# Start development server
npm run startThe app will be available at http://localhost:5173/cws/debug/.
This project uses the Diataxis framework to provide you with the right information at the right time:
🎯 Tutorials - Learning-oriented
"Take me by the hand and teach me"
- Getting Started Tutorial - Your first steps with the web config app
- Debug Console Tutorial - Master the debug console
- Device Management Tutorial - Device inspection and management
🔧 How-to Guides - Problem-oriented
"Show me how to solve this specific problem"
- Troubleshooting Connection Issues
- Filter and Search Debug Messages
- Export and Analyze Configuration
- Monitor System Performance
- Restart and Reload Configuration
📚 Reference - Information-oriented
"Tell me the facts"
- UI Components Reference - Complete component documentation
- API Endpoints Reference - All available REST endpoints
- Configuration Schema Reference - Configuration file structure
- Device Types Reference - Supported device types and properties
- Log Levels and Filters Reference - Complete logging reference
💡 Explanation - Understanding-oriented
"Help me understand why and how this works"
- System Architecture - How the web app integrates with Essentials
- Debug Console Design - How real-time debugging works
- Configuration Management - How configuration is handled
- Security Considerations - Security model and best practices
- 🔍 Real-Time Debug Console: Monitor system behavior with live message streaming
- ⚙️ Device Management: Inspect and understand configured devices
- 📄 Configuration Viewer: View and analyze complete system configuration
- 📦 Version Information: Check loaded assemblies and software versions
- 🏷️ Type Registry: Browse supported device types and capabilities
- 🔄 System Control: Restart system and reload configuration safely
Runs the app in development mode via Vite. The page will reload when you make edits. Available at http://localhost:5173/cws/debug/.
Launches the Vitest test runner in interactive watch mode.
Compiles TypeScript and builds the app for production to the dist/ folder with optimized bundles.
Serves the production build locally for inspection before deployment.
Create a .env.local file in the project root (never commit this file):
PROGRAM_HOST=https://your-processor-ip # Required: Target processor IP
VITE_PROGRAM_ID=app01 # Optional: Default application slotDevelopment Prerequisites:
- Node.js 18+
- npm
- Network access to target PepperDash Essentials processor
- Modern web browser
Frontend Stack:
- React 19 with TypeScript
- Redux Toolkit for state management (including WebSocket middleware)
- React Router v7 for navigation
- Bootstrap 5 for UI components
- WebSocket for real-time communication
Integration:
- Connects to PepperDash Essentials processors via HTTPS API at
/cws/<appId>/api/ - Uses WebSocket for real-time debug message streaming
- In development, Vite proxies all
/cws/API requests toPROGRAM_HOST - In production, served as static files from the processor's built-in web server at
/cws/debug/
- HTTPS Required: All communication encrypted
- Self-Signed Certificates: Common for internal network devices; must be accepted in the browser before use
- Processor Authentication: Leverages processor's built-in security
- Network-Level Security: Relies on internal network protection
Supported Browsers:
- Chrome 70+
- Firefox 65+
- Safari 12+
- Edge 79+
Required Features:
- WebSocket support for real-time debugging
- Modern JavaScript (ES6+) support
- CSS Grid and Flexbox for responsive layouts
New Users:
- Start with Getting Started Tutorial
- Learn Debug Console Basics
- Explore Device Management
Troubleshooting:
- Check How-to Guides for specific solutions
- Review Connection Troubleshooting for access issues
- Use Performance Monitoring for system health
Advanced Usage:
- Understand System Architecture
- Learn Debug Console Design
- Reference API Documentation
This project follows standard React development practices:
- TypeScript for type safety
- ESLint and Prettier for code formatting
- Component-based architecture with feature organization
- Redux Toolkit for predictable state management
MIT License - see LICENSE file for details.
For Application Issues:
- Check the How-to Guides for common solutions
- Review system requirements and browser compatibility
- Verify network connectivity to target processor
For PepperDash Essentials Questions:
- Consult PepperDash documentation and support resources
- Verify Essentials framework version compatibility
- Check processor configuration and network settings
Built with ❤️ for the PepperDash community. This web application makes PepperDash Essentials systems more accessible and manageable through modern web interfaces.