Skip to content

README.md

Latest commit

 

History

History
180 lines (132 loc) · 7.18 KB

README.md

File metadata and controls

180 lines (132 loc) · 7.18 KB

PepperDash Essentials Web Config App

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.

🚀 Quick Start

For Users

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.

For Developers

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 start

The app will be available at http://localhost:5173/cws/debug/.

📚 Documentation

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"

🔧 How-to Guides - Problem-oriented

"Show me how to solve this specific problem"

📚 Reference - Information-oriented

"Tell me the facts"

💡 Explanation - Understanding-oriented

"Help me understand why and how this works"

✨ Key Features

  • 🔍 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

🛠️ Development

Available Scripts

npm start

Runs the app in development mode via Vite. The page will reload when you make edits. Available at http://localhost:5173/cws/debug/.

npm test

Launches the Vitest test runner in interactive watch mode.

npm run build

Compiles TypeScript and builds the app for production to the dist/ folder with optimized bundles.

npm run preview

Serves the production build locally for inspection before deployment.

Environment Setup

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 slot

Development Prerequisites:

  • Node.js 18+
  • npm
  • Network access to target PepperDash Essentials processor
  • Modern web browser

Architecture Overview

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 to PROGRAM_HOST
  • In production, served as static files from the processor's built-in web server at /cws/debug/

🔐 Security Considerations

  • 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

🌐 Browser Compatibility

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

📖 Learning Resources

New Users:

  1. Start with Getting Started Tutorial
  2. Learn Debug Console Basics
  3. Explore Device Management

Troubleshooting:

Advanced Usage:

🤝 Contributing

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

📄 License

MIT License - see LICENSE file for details.

🆘 Support

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.