ESP32 OTA (Over-the-Air) Updates – AsyncElegantOTA (VS Code + PlatformIO)

In this guide, you’ll learn how to do over-the-air (OTA) updates to your ESP32 boards using the AsyncElegantOTA library and
VS Code with PlatformIO
. The Async Elegant OTA library creates a web server that allows you to update new firmware (a new sketch) to your board without the need to make a serial connection between the ESP32 and your computer.
Additionally, with this library, you can also upload new files to the ESP32 filesystem (SPIFFS). The library is very easy to use and it’s compatible with the ESPAsyncWebServer library that we use often to build web server projects.
By the end of this tutorial, you’ll be able to easily add OTA capabilities to your web server projects with the ESP32 to upload new firmware and files to the filesystem wirelessly in the future.
Recommended reading:
Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266
We have a similar tutorial for the ESP8266 NodeMCU board:
ESP8266 NodeMCU OTA (Over-the-Air) Updates – AsyncElegantOTA (VS Code + PlatformIO)
Overview
This tutorial covers:
Add the ElegantOTA feature to your ESP32 web server
Upload new firmware via OTA to ESP32 board
Upload files to SPIFFS via OTA to ESP32 board
We recommend that you follow all the steps in this tutorial to understand how ElegantOTA works and how you can use it in your projects. To demonstrate how to do this, we’ll upload files to build different web server projects.
ESP32 OTA (Over-the-Air) Programming
OTA (Over-the-Air) update is the process of loading new firmware to the ESP32 board using a Wi-Fi connection rather than a serial communication. This functionality is extremely useful in case of no physical access to the ESP32 board.
There are different ways to perform OTA updates. In this tutorial, we’ll cover how to do that using the
AsyncElegantOTA library
. In our opinion, this is one of the best and easiest ways to perform OTA updates.
The AsyncElegantOTA library creates a web server that you can access on your local network to upload new firmware or files to the filesystem (SPIFFS). The files you upload should be in
.bin
format. We’ll show you later in the tutorial how to get your files to
.bin
format.
The only disadvantage of OTA programming is that you need to add the code for OTA in every sketch you upload so that you’re able to use OTA in the future. In the case of the AsyncElegantOTA library, it consists of just three lines of code.
AsyncElegantOTA Library
As mentioned previously, there are different alternatives for OTA programming with the ESP32 boards. For example, in the Arduino IDE, under the
Examples
folder, there is the
BasicOTA
example (that never worked well for us); the
OTA Web Updater
(works well, but it is difficult to integrate with web servers using the ESPAsyncWebServer library); and many other examples from different libraries.
Most of our web server projects with the ESP32 use the
ESPAsyncWebServer library
. So, we wanted a solution that was compatible with that library. The
AsyncElegantOTA library
is just perfect for what we want:
It is compatible with the ESPAsyncWebServer library;
You just need to add three lines of code to add OTA capabilities to your “regular” Async Web Server;
It allows you to update not only new firmware to the board, but also files to the ESP32 filesystem (SPIFFS);
It provides a beautiful and modern web server interface;
It works extremely well.
If you like this library and you’ll use it in your projects, consider supporting the
developer’s work
OTA Updates with AsyncElegantOTA Library – Quick Summary
To add OTA capabilities to your projects using the AsyncElegantOTA library, follow these steps:
Iclude the
AsyncElegantOTA
AsyncTCP
and
ESPAsyncWebServer
libraries in the
platformio.ini
file of your project;
Include AsyncElegantOTA library at the top of the code:
#include <AsyncElegantOTA.h>;
Add this line
AsyncElegantOTA.begin(&server);
before
server.begin();
Open your browser and go to
http://<IPAddress>/update
, where
<IPAddress>
is your ESP32 IP address.
Continue reading the tutorial for more detailed steps.
How does OTA Web Updater Work?
The first sketch should be uploaded via the serial port. This sketch should contain the code to create the OTA Web Updater so that you are able to upload code later using your browser.
The OTA Web Updater sketch creates a web server you can access to upload a new sketch via a web browser.
Then, you need to implement OTA routines in every sketch you upload, so that you’re able to do the next updates/uploads over-the-air.
If you upload a code without an OTA routine you’ll no longer be able to access the web server and upload a new sketch over-the-air.
Install AsyncElegantOTA Library (VS Code + PIO)
In this tutorial, we’ll use VS Code + PIO to program the ESP32. If you want to use Arduino IDE, follow the next tutorial:
ESP32 OTA (Over-the-Air) Updates – AsyncElegantOTA using Arduino IDE
To use the AsyncElegantOTA library, include it in your
platformio.ini
file. You also need to include the ESPAsyncWebServer library. Add these libraries as follows:
lib_deps = ESP Async WebServer
ayushsharma82/AsyncElegantOTA @ ^2.2.5
AsyncElegantOTA ESP32 Basic Example
If you’re using an ESP32, you need to downgrade your ESP32 boards’ add-on to version 2.0.X. At the moment, the AsyncElegantOTA library is not compatible with version 3.X. If you want to use version 3.X, please use the newest version of the library:
ElegantOTA V3
Let’s start with the basic example provided by the library. This example creates a simple web server with the ESP32. The root URL displays some text, and the
/update
URL displays the interface to update the firmware and the filesystem.
Edit your
platformio.ini
file so that it looks as follows:
[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
monitor_speed = 115200
lib_deps = ESP Async WebServer
ayushsharma82/AsyncElegantOTA @ ^2.2.5
Copy the following code to the main.cpp file.
/*
Complete project details
- Arduino IDE: https://ajvikalabs.com/esp32-ota-over-the-air-arduino/
- VS Code: https://ajvikalabs.com/esp32-ota-over-the-air-vs-code/

This sketch shows a Basic example from the AsyncElegantOTA library: ESP32_Async_Demo
https://github.com/ayushsharma82/AsyncElegantOTA
*/

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

AsyncWebServer server(80);

void setup(void) {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");

// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "text/plain", "Hi! I am ESP32.");
});

AsyncElegantOTA.begin(&server); // Start ElegantOTA
server.begin();
Serial.println("HTTP server started");
}

void loop(void) {

}
Insert your network credentials and the code should work straight away:
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
How the Code Works
First, include the necessary libraries:
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
Insert your network credentials in the following variables so that the ESP32 can connect to your local network.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Create an
AsyncWebServer
object on port 80:
AsyncWebServer server(80);
In the
setup()
, initialize the Seri