Veröffentlicht am von

ESP32 Firmware sichern und wiederherstellen – Schnell & Einfach mit ESPTool

Wer mit dem ESP32 arbeitet, kennt die Situation: Ein Projekt läuft stabil, die Firmware ist getestet – und nun soll sie auf weitere Boards übertragen oder für andere verfügbar gemacht werden.
Genau hier hilft ein Firmware-Backup.

Es sorgt für Sicherheit, ermöglicht das Klonen auf neue Geräte und eröffnet die Möglichkeit, die Firmware sogar über einen Webinstaller im Browser bereitzustellen.

In diesem Beitrag zeige ich dir Schritt für Schritt, wie du deine ESP32-Firmware sicherst, wiederherstellst und ggf. komfortabel verteilst.

Übersicht der Abschnitte

Schritt 1: Voraussetzung der Arbeitsumgebung

Bevor du mit Backup, Klonen und Webinstaller startest, stelle sicher, dass deine Umgebung passt. Siehe dir ggf. die Voraussetzungen deiner Arbeitsumgebung an, ob diese passen.

Schritt 2: Firmware-Backup mit ESPTool

Vorab ESPTool installieren im Windows 11 Terminal / Powershell (als Admin) mit: 

PS C:\Users\deinUserName> pip install esptool

Optional: Sollten dabei angebotene Update kommen, diese auch ausgeführt.

Erster Test mit Board Info abrufen:
Prüfe welche Entwicklungsboard du nun hast.
Verbinde nun deinen ESP32 mit dem PC und prüfe ggf. den COM-Port im Gerätemanager. Führe im Terminal folgenden Befehl aus: python -m esptool -p COM5 flash-id

Wenn nichts erscheint: Achte auf richtigen COM Port – (Beispiel ist Com5)
Bei Fehler: Wrong boot mode detected (0x13)! Boot Knopf gedrückt halten

Perfekt, bei mir steht die Verbindung. Die Fakten liegen auf dem Tisch:
Ich habe einen klassischen ESP32-D0WDQ6 mit 4MB Flash am Start.

Da ich jetzt die exakte Speichergröße kenne (4MB entspricht hexadezimal 0x400000), werde ich nun den Klon-Vorgang starten.
Ich habe die Befehle so angepasst, dass sie auch ohne PATH-Variable (python -m ...) funktionieren.

Firmware auslesen (Backup)

Wir lesen den kompletten Speicher von Adresse 0 bis 4MB aus, inkl. Bootloader, Partition Table, App

  1. Lass den Source-ESP32 an COM5 angeschlossen.
  2. Führe diesen Befehl in der PowerShell aus:
python -m esptool -p COM5 -b 921600 read-flash 0 0x400000 esp32_backup.bin

Erklärung der Parameter:

  • -b 921600: Erhöht die Lesegeschwindigkeit massiv (Standard ist 115200).
    Falls es Fehler gibt wie
    A fatal error occurred: Corrupt data, expected 0x1000 bytes but received 0xf5a bytes
    dann verringere die Lesegeschwindigkeit wieder.
  • 0: Startadresse.
  • 0x400000: Bei Größe 4MB. Bei 8MB 0x800000 und bei 16MB 0x1000000
  • esp32_backup.bin: Dateiname, die Datei landet in deinem aktuellen Verzeichnis (wo die PowerShell gerade steht).

Schritt 3: Wiederherstellen/Klonen auf ein neues ESP32 (Restore)

Jetzt wird der Klon mit dem erzeugten Backup bespielt:

  1. Trenne den alten ESP32 vom USB.
  2. Schließe den neuen, baugleichen ESP32 an (prüfe kurz, ob er auch an COM5 erkannt wird, sonst Port im Befehl anpassen).
  3. Führe den Schreib-Befehl aus:
python -m esptool -p COM5 -b 921600 write-flash 0 esp32_backup.bin

Das Tool entpackt und schreibt das Binary automatisch an den Start (Adresse 0).

Ich hoffe es klappt bei euch genauso gut.
Damit sollte das Hauptthema hoffentlich gut nachvollziehbar sein.

Optional: Bereitstellung über Webinstaller Web Serial API

Wenn du schon mal mehrere ESPs mit dem gleichen Stand flashen musst oder mehrere verschiedene Projekte schnell auf Abruf flashen willst, ist diese WebInstaller Lösung bestimmt auch noch interessant für dich.
Das Stichwort hier lautet Web Serial API.

Der Industriestandard dafür sind die ESP Web Tools (entwickelt von den Machern von Home Assistant). Das ist keine Bastellösung, sondern eine robuste, auf JavaScript basierende Schnittstelle, die direkt im Browser (Chrome, Edge) auf die serielle Schnittstelle des PCs zugreift.

Was eigentlich für Web Server gedacht ist, nutze ich lokal an meinem Rechner um komfortabler ESP-Module zu flashen. Dennoch versuche ich hier mal auch die notwendigsten Infos zusammen zu stellen um das auch auf einem eigenen Web Server zu realisieren:

Voraussetzung (Fakten-Check)

  1. HTTPS ist Pflicht: Die Web Serial API funktioniert aus Sicherheitsgründen nur in einem sicheren Kontext (HTTPS). Da du eine professionelle Seite betreibst, setze ich das voraus.
  2. Browser-Kompatibilität: Das funktioniert aktuell nur in Chromium-basierten Browsern (Chrome, Edge, Opera, Brave). Firefox und Safari unterstützen die Web Serial API (noch) nicht. Darauf solltest du deine Leser hinweisen.
  3. Datei-Hosting: Deine esp32_backup.bin muss auf deinem Webserver liegen.

Die Umsetzung

Wir nutzen ein Custom HTML Element, das die gesamte Logik (Verbindung, Erasing, Flashing) kapselt. <esp-web-install-button>.

Du benötigst drei Dinge auf deinem Webserver im selben Verzeichnis:

  1. Deine erstellete Backup Datei: esp32_backup.bin
  2. Eine Manifest-Datei: manifest.json
  3. Den HTML-Code für die aufzurufende Webseite.

1. Backup-Datei

Wie oben beschrieben (Dateiname merken)

2. Die Manifest-Datei (manifest.json)

Da du bereits ein komplettes Image (inkl. Bootloader, Partition Table, App) ab Adresse 0x0000 hast, ist die Konfiguration sehr simpel. Erstelle eine Datei namens manifest.json:

{
  "name": "Prilchen ESP32 Projekt",
  "version": "1.0.0",
  "new_install_prompt_erase": true,
  "builds": [
    {
      "chipFamily": "ESP32",
      "parts": [
        { "path": "esp32_backup.bin", "offset": 0 }
      ]
    }
  ]
}

  • new_install_prompt_erase: Fragt den User, ob er den Flash vorher löschen will (empfohlen bei Komplett-Images).
  • path: mit Angabe des Dateiname
  • offset 0: Wichtig, da dein Backup bei Adresse 0 beginnt.

3. Der HTML-Code für deine Webseite

Füge folgenden Code für die aufzurufende WebInstaller Startseite:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prilchen ESP32 Web Installer</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; color: #333; }
        p { color: #666; margin-bottom: 20px; }
        
        /* Styling für den Custom-Button Container */
        esp-web-install-button {
            display: block;
            margin-top: 1rem;
        }
        
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover { background-color: #0056b3; }
    </style>
    
    <script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
</head>
<body>

    <div class="container">
        <h1>Prilchen Installer</h1>
        <p>Schließe deinen ESP32 via USB an und klicke auf den Button, um die neueste Firmware zu installieren.</p>
        
        <esp-web-install-button manifest="manifest.json">
            <button slot="activate">Verbinden & Installieren</button>
            <span slot="unsupported" style="color:red;">Dein Browser ist nicht kompatibel. Bitte nutze Chrome oder Edge.</span>
            <span slot="not-allowed" style="color:red;">Nur über HTTPS oder localhost nutzbar.</span>
        </esp-web-install-button>

        <p style="font-size: 0.8rem; margin-top: 20px; color: #999;">
            Powered by ESP Web Tools
        </p>
    </div>

</body>
</html>

Lokaler Test mit Mini Python-Webserver

4. Die Dateistruktur

Sofern noch nicht umgesetzt, erstelle einen neuen Ordner (z. B. webinstaller_test) und lege dort folgende drei Dateien hinein:

  1. esp32_backup.bin (Dein Backup)
  2. manifest.json (Der Code von oben)
  3. index.html (Vollständige Beispiel Seite siehe unten)

5. Den lokalen Webserver starten

Öffne deine PowerShell, navigiere in den erstellten Ordner „webinstaller_test“ und führe dort folgenden Befehl aus:

python -m http.server 8000

Windows fragt eventuell nach einer Firewall-Freigabe -> Zulassen.

PowerShell Terminal geöffnet lassen

6. Testen

  • Öffne deinen Browser (Chrome oder Edge).
  • Rufe die Adresse auf: http://localhost:8000
  • Du solltest jetzt deine Seite sehen.
  • Schließe den neuen ESP32 an und klicke auf „Verbinden & Installieren“.
  • Der Browser fragt nach dem COM-Port
  • Es kommt die eingetragene Sicherheitsabfrage ob wirklich gelöscht werden soll
  • ggf nun den Boot‑Button drücken, Beginnt nun mit dem Flashen.


Tipps und Tricks:
– Sollte im Sketch Ausgaben im Seriellen Monitor zu sehen sein oder man will nun den Neustart LOG sehen wollen, dann Auswahl Logs & Console. Hier kann auch ein Reset ausgelöst werden.

– Wie stoppt man wieder den lokaler Webserver ordentlich?
Mit STRG – C (bzw. CTRL + C).

Nicht Fenster einfach schließen! Würdest du einfach das Fenster über das „X“ schließen, wird der Prozess oft hart beendet (SIGTERM/SIGKILL), und es kann passieren, dass der Port 8000 vom Betriebssystem noch für einige Sekunden oder Minuten als „belegt“ (TIME_WAIT) markiert bleibt.

Weitere Dokumentation

Dokumentation des ESPTool vom Hersteller Espressif: esptool latest documentation

Für GitHub User:

Optional: ESP Web Tools Installer auf GitHub einbinden

Schritt 1: Firmware‑Image ins Repository legen

Lege dein erzeugtes .bin‑Image in einen Ordner, z. B.: firmware/firmware.bin

Schritt 2: Installer‑HTML erstellen

Erstelle eine webinstaller.html Datei und füge folgenden Code ein:

und füge folgenden Code ein:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ESP Web Installer</title>
    <script type="module" src="https://unpkg.com/esp-web-tools@9/dist/web/install-button.js"></script>
  </head>
  <body>
    <h1>ESP Web Installer</h1>

    <esp-web-install-button
      manifest="manifest.json">
    </esp-web-install-button>

  </body>
</html>

Schritt 3: Manifest‑Datei erstellen

Erstelle im selben Ordner eine manifest.json Datei. Beispielinhalt für ein einzelnes Firmware‑Image:

{
  "name": "ESP32 BT MusikBox",
  "version": "1.0.0",
  "builds": [
    {
      "chipFamily": "ESP32",
      "parts": [
        {
          "path": "firmware/firmware.bin",
          "offset": 0x00000
        }
      ]
    }
  ]
}

Schritt 4: GitHub Pages aktivieren

Damit der Installer funktioniert, muss GitHub die Dateien als Website ausliefern.

Gehe zu:

Settings → Pages → Build from branch → main → /root

Speichern.

GitHub erzeugt dann eine URL wie: https://deinname.github.io/dein-repo/webinstaller.html

Schritt 5: Installer verlinken

In deiner README.md kannst du jetzt einen Button einfügen:

## 🚀 Web Installer

[ESP Web Installer starten](https://deinname.github.io/dein-repo/webinstaller.html)

Oder als Button:

<a href="https://deinname.github.io/dein-repo/webinstaller.html">
  <img src="https://img.shields.io/badge/Flash%20Firmware-ESP%20Web%20Tools-blue?logo=espressif" />
</a>

Fertig!

Du hast jetzt:

Damit können Nutzer deine ESP32‑Projekte direkt im Browser flashen, ohne Tools, ohne Treiber, ohne Terminal.

, ,
Powered by DSGVO  GDPR Cookie Compliance
Datenschutz-Übersicht

Diese Website verwendet Cookies, damit wir dir die bestmögliche Benutzerkomfort bieten können. Cookie-Informationen werden in deinem Browser gespeichert und führen Funktionen aus, wie das Wiedererkennen von dir, wenn du auf unsere Website zurückkehrst und hilft uns zu verstehen, welche Abschnitte der Website für dich am interessantesten und nützlichsten sind.