ESP32 OTA Updates over BLE from a React Web Application

Contributors: Englandsaurus
Favorited Favorite 1


The ESP32 is a ridiculously capable microcontroller. With WiFi, Bluetooth, and two cores, there's a ton you can do with it including update the firmware without ever plugging it into your computer. This is something I've been wanting to implement for a while to allow somebody like my grandmother to push software updates to a hypothetical electronic gift. The examples I kept seeing on the internet were all based on the ArduinoOTA examples included in the Arduino IDE, and followed the same basic method.

  1. Hardcode your SSID and Password into the ESP32 using the Arduino IDE
  2. Connect the ESP32 to WiFi and have it set up a local web server capable of receiving a binary file.
  3. Obtain the IP address over serial if ESP32's mDNS doesn't want to work on your network.
  4. Have the compiled binary stored locally on your computer or phone.
  5. Navigate to the page or IP address of the ESP32
  6. Browse to the file using the dropdown provided by the ESP32 and hit send.

This process functions well and updates the ESP32 in a few seconds depending on file size, but for some applications, it isn't the best. For example, I wanted a nice clunky application in the HTML as well that could interact with my ESP32 over BLE, and putting that into the Arduino sketch (In addition to being difficult to deal with) would probably exceed the memory budget for OTA updates anyway. So, since I'm already using BLE and a webapp, let's toss OTA updates in as the icing on the cake. BLE isn't the best way to do this, but like I said, it's already in use elsewhere. This BLE OTA update employs the following method.

  1. ESP32 begins BLE server.
  2. WebApp allows the user to pair with our ESP32 BLE Server using Web Bluetooth. (Sorry iPhone users)
  3. Upon pairing, the WebApp reads the hardware and software version numbers hard-coded into the sketch on the ESP32.
  4. This version number is crosschecked with a JSON file of containing software versions along with their compatible hardware versions.
  5. If a compatible update is available, the user is asked if they want to update.
  6. If the user clicks yes, the WebApp fetches the firmware and writes it to the ESP32 in buffered chunks.
SparkFun Thing Plus - ESP32 WROOM (Micro-B)

SparkFun Thing Plus - ESP32 WROOM (Micro-B)


The Illustrious ESP32