spore/examples/static_web

Static Web Server Example

This example demonstrates how to serve static HTML files from LittleFS using the Spore framework.

Features

• Serves static files from LittleFS filesystem
• Beautiful web interface with real-time status updates
• Responsive design that works on mobile and desktop
• Automatic API endpoint discovery and status monitoring

Files

• main.cpp - Main application entry point
• data/index.html - Web interface (served from LittleFS)

Web Interface

The web interface provides:

• Node Status - Shows uptime and system information
• Network Status - Displays WiFi connection status
• Task Status - Shows active background tasks
• Cluster Status - Displays cluster membership
• API Links - Quick access to all available API endpoints

Building and Flashing

Build for D1 Mini (recommended for web interface)

# Build the firmware
pio run -e d1_mini_static_web

# Flash to device
pio run -e d1_mini_static_web -t upload

Upload Files to LittleFS

After flashing the firmware, you need to upload the HTML files to the LittleFS filesystem:

# Upload data directory to LittleFS
pio run -e d1_mini_static_web -t uploadfs

Usage

1. Flash the firmware to your ESP8266 device
2. Upload the data files to LittleFS
3. Connect to the device's WiFi network
4. Open a web browser and navigate to http://<device-ip>/
5. The web interface will load and display real-time status information

API Endpoints

The web interface automatically discovers and displays links to all available API endpoints:

• /api/node/status - Node status and system information
• /api/network/status - Network and WiFi status
• /api/tasks/status - Task management status
• /api/cluster/members - Cluster membership
• /api/node/endpoints - Complete API endpoint list

Customization

To customize the web interface:

1. Modify data/index.html with your desired content
2. Add additional static files (CSS, JS, images) to the data/ directory
3. Re-upload the files using pio run -e d1_mini_static_web -t uploadfs

File Structure

data/
├── index.html          # Main web interface
└── (other static files) # Additional web assets

The StaticFileService automatically serves files from the LittleFS root directory, so any files placed in the data/ directory will be accessible via HTTP.