data/
├── index.html              # Main HTML page
├── css/
│   ├── bootstrap.min.css   # Bootstrap CSS (local copy)
│   └── style.css           # Custom styles
└── js/
    ├── bootstrap.bundle.min.js  # Bootstrap JS (local copy)
    └── app.js              # Application JavaScript

How to Upload Files to ESP32

Method 1: Using PlatformIO (Recommended)

Install LittleFS Uploader:
- In VS Code, open PlatformIO Home
- Go to Platforms → Espressif 32
- Make sure it's installed/updated
Download Bootstrap Files (if not already present):

Download these files and place them in the appropriate directories:
- Bootstrap CSS (v5.3.0):
  - URL: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
  - Save to: data/css/bootstrap.min.css
- Bootstrap JS (v5.3.0):
  - URL: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js
  - Save to: data/js/bootstrap.bundle.min.js
Upload Filesystem:
- In VS Code, click PlatformIO icon
- Under PROJECT TASKS → env:wemos_d1_mini32
- Click "Upload Filesystem Image"
- Wait for upload to complete

Method 2: Manual Download and Upload

If you need to download Bootstrap files manually:

# Navigate to data directories
cd data/css
wget https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

cd ../js
wget https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

Or use curl:

cd data/css
curl -o bootstrap.min.css https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

cd ../js
curl -o bootstrap.bundle.min.js https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

Verifying Upload

After uploading, you can verify the files are present by:

Opening Serial Monitor (115200 baud)
Look for "LittleFS mounted successfully" message
Access the web interface and check browser console for any 404 errors

File Sizes (Approximate)

bootstrap.min.css: ~190 KB
bootstrap.bundle.min.js: ~220 KB
style.css: ~1 KB
app.js: ~4 KB
index.html: ~4 KB

Total: ~420 KB (ESP32 has 1.5MB+ available for LittleFS)

Benefits of LittleFS Approach

✅ Better Organization: Separate HTML, CSS, and JS files ✅ Offline Operation: Works without internet connection ✅ Easier Maintenance: Edit files without recompiling firmware ✅ Faster Updates: Only upload filesystem when web files change ✅ Better Performance: No need to parse embedded strings ✅ Standard Development: Use familiar web development workflow

Troubleshooting

LittleFS Mount Failed

Ensure filesystem is properly formatted
Try uploading filesystem image again
Check serial output for detailed error messages

404 Errors on Static Files

Verify files are in correct directories
Check file names match exactly (case-sensitive)
Re-upload filesystem image

Bootstrap Not Loading

Download Bootstrap files to data/css/ and data/js/
Upload filesystem image
Clear browser cache and reload