![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP8266-ElegantOTA-Arduino-IDE.jpg?resize=1024%2C576&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nBy the end of this tutorial, you\u2019ll be able to easily add OTA capabilities to your web server projects with the ESP8266 to upload new firmware wirelessly in the future.<\/p>\n\n\n\n
Table Of Contents<\/h2>\n\n\n\n
Throughout this tutorial, we’ll cover:<\/p>\n\n\n\n
- \n
- Add the ElegantOTA feature to your web server<\/a><\/li>\n\n\n\n
- Upload new firmware via OTA to the ESP8266 board<\/a><\/li>\n<\/ul>\n\n\n\n
We recommend that you follow all the tutorial steps to understand how the ElegantOTA library<\/a> works and how you can use it in your projects. To demonstrate how to do this, we\u2019ll upload files to build different web server projects.<\/p>\n\n\n\n
ESP8266 OTA (Over-the-Air) Programming<\/h2>\n\n\n\n
OTA (Over-the-Air) update is the process of loading new firmware to the ESP8266 board using a Wi-Fi connection rather than a serial communication. This functionality is extremely useful in case of no physical access to the ESP8266 board. You don’t need a connection between your computer and the board to upload new code.<\/p>\n\n\n
\n![\"Async](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/01\/ESP8266-Async-ElegantOTA-How-it-Works_ESP8266-ElegantOTA.png?resize=737%2C371&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThere are different ways to perform OTA updates. In this tutorial, we\u2019ll cover how to do that using the ElegantOTA library<\/a> (version V3 \u2014 this is the successor of the deprecated AsyncElegantOTA library<\/a>). In our opinion, this is one of the best and easiest ways to perform OTA updates.<\/p>\n\n\n\n
The ElegantOTA library creates a web server that you can access on your local network to upload new firmware or files to the filesystem (SPIFFS or LittleFS). The files you upload should be in .bin<\/em> format. We\u2019ll show you later in this tutorial how to convert your files to .bin<\/em> format.<\/p>\n\n\n\n
The only disadvantage of OTA programming is that you need to add the code for OTA in every sketch you upload so that you\u2019re able to use OTA in the future. In case of the ElegantOTA library, it consists of just three lines of code.<\/p>\n\n\n\n
ElegantOTA Library<\/h2>\n\n\n
\n![\"ElegantOTA](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegantota-logo.png?resize=796%2C190&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nHere are some great features of this library:<\/p>\n\n\n\n
- \n
- It is compatible with the built-in ESP8266WebServer.h<\/span> library and with several forks of the ESPAsyncWebServer<\/span> library.<\/li>\n\n\n\n
- You just need to add three lines of code to add OTA capabilities to your \u201cregular\u201d web server;<\/li>\n\n\n\n
- It allows you to update not only new firmware to the board but also files to the ESP8266 filesystem (LittleFS or SPIFFS);<\/li>\n\n\n\n
- It provides a beautiful and modern web server interface;<\/li>\n\n\n\n
- It is available as a pro paid version that adds more features.<\/li>\n<\/ul>\n\n\n\n
OTA Updates with the ElegantOTA Library – Quick Summary<\/h3>\n\n\n\n
To add OTA capabilities to your projects using the ElegantOTA library, follow these steps:<\/p>\n\n\n\n
1) <\/strong>Install the ElegantOTA<\/a>, ESPAsyncTCP<\/a>, and ESPAsyncWebServer <\/a>libraries;<\/p>\n\n\n\n
2)<\/strong> Include ElegantOTA library at the top of the Arduino sketch:<\/p>\n\n\n\n
#include <ElegantOTA.h>;<\/span><\/code><\/pre>\n\n\n\n3)<\/strong> Add the following line in the setup before server.begin();<\/span><\/p>\n\n\n\n
ElegantOTA.begin(&server);<\/code><\/pre>\n\n\n\n4)<\/strong> In the loop()<\/span>, add the following line:<\/p>\n\n\n\n
ElegantOTA.loop();<\/code><\/pre>\n\n\n\n5)<\/strong> Open your browser and go to http:\/\/<IPAddress>\/update<\/span>, where <IPAddress><\/span> is your ESP8266 IP address to access the web server page for the OTA updates.<\/p>\n\n\n\n
Continue reading the tutorial for more detailed steps.<\/p>\n\n\n\n
How does OTA Web Updater Work?<\/h3>\n\n\n\n
The first sketch must be uploaded using a serial connection. This sketch should include the code to set up the OTA Web Updater, allowing you to upload new sketches through a web browser.<\/p>\n\n\n\n
The OTA Web Updater creates a web server where you can upload sketches wirelessly.<\/p>\n\n\n\n
If your code doesn\u2019t include an OTA routine, you won\u2019t be able to use the web server to upload new sketches wirelessly.<\/p>\n\n\n\n
After that, make sure every sketch you upload includes OTA routines so you can continue updating the board wirelessly in the future.<\/p>\n\n\n\n
Installing the ElegantOTA Library<\/h2>\n\n\n\n
To install the ElegantOTA library in the Arduino IDE go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong>, search for ElegantOTA <\/strong>and install the ElegantOTA library by Ayush Sharma<\/em>.<\/p>\n\n\n
\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/install-elegantota-library-Arduino-IDE.png?resize=877%2C586&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nEnabling Async Mode<\/h3>\n\n\n\n
For the ElegantOTA library to work in async mode (with the ESPAsyncWebServer library), you need to do the following procedure.<\/p>\n\n\n\n
1)<\/strong> Go to your Arduino libraries <\/em>directory.<\/p>\n\n\n\n
2)<\/strong> Open the ElegantOTA<\/em> folder and then open the src <\/em>folder.<\/p>\n\n\n\n
3)<\/strong> Locate the ELEGANTOTA_USE_ASYNC_WEBSERVER<\/span> macro in the ElegantOTA.h<\/em> file, and set it to 1<\/span> as follows:<\/p>\n\n\n\n
#define ELEGANTOTA_USE_ASYNC_WEBSERVER 1<\/code><\/pre>\n\n\n\n![\"elegantota](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/elegant-ota-set-async-mode.png?resize=711%2C357&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n4)<\/strong> Save the changes to the ElegantOTA.h<\/em> file.<\/p>\n\n\n\n
5)<\/strong> Now you can use the ElegantOTA in async mode for your OTA updates and with the ESPAsyncWebServer library.<\/p>\n\n\n\n
Install ESPAsyncTCP and ESPAsyncWebServer Libraries<\/h3>\n\n\n\n
To test the examples in this tutorial, you also need to install the ESPAsyncTCP and the ESPAsyncWebServer libraries.<\/p>\n\n\n\n
Note:<\/strong> the ElegantOTA library works with different forked versions of the ESPAsyncWebServer and the ESPAsyncTCP web server libraries, so you don’t necessarily need to use the same ones that we’re using.<\/p>\n\n\n\n
Follow the next instructions to install those libraries. <\/p>\n\n\n\n
Click the links below to download the libraries’ .zip<\/em> folders.<\/p>\n\n\n\n
- \n
- ESPAsyncWebServer<\/a><\/li>\n\n\n\n
- ESPAsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n
These libraries aren\u2019t available to install through the Arduino Library Manager, so you need to copy the library .zip<\/em> files to the Arduino Installation Libraries <\/em>folder. Alternatively, in your Arduino IDE, you can go to Sketch <\/strong>> Include Library<\/strong> > Add .zip Library<\/strong> and select the libraries you\u2019ve just downloaded.<\/p>\n\n\n\n
ElegantOTA ESP8266 Basic Example<\/h2>\n\n\n\n
Let\u2019s start with a basic example (based on one of the library’s examples). The following code creates a simple web server with the ESP32. The root URL displays some text, and the \/update<\/strong> URL displays the interface to update the firmware and the filesystem.<\/p>\n\n\n\n
Copy the following code to your Arduino IDE.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-ota-elegantota-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Softwar\n*********\/\n\n#include <Arduino.h>\n#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ElegantOTA.h>\n\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nAsyncWebServer server(80);\n\nvoid setup(void) {\n Serial.begin(115200);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n Serial.println("");\n\n \/\/ Wait for connection\n while (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(".");\n }\n Serial.println("");\n Serial.print("Connected to ");\n Serial.println(ssid);\n Serial.print("IP address: ");\n Serial.println(WiFi.localIP());\n\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, "text\/plain", "Hi! I am ESP8266.");\n });\n\n server.begin();\n Serial.println("HTTP server started");\n\n ElegantOTA.begin(&server); \/\/ Start ElegantOTA\n}\n\nvoid loop(void) {\n ElegantOTA.loop();\n\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Insert your network credentials and the code should work straight away.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nHow Does the Code Work?<\/h3>\n\n\n\n
Start by including the required libraries.<\/p>\n\n\n\n
#include <Arduino.h>\n#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ElegantOTA.h><\/code><\/pre>\n\n\n\nInsert your network credentials in the following variables so that the ESP32 can connect to the Wi-Fi on your local network.<\/p>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nCreate an AsyncWebServer<\/span> object on port 80:<\/p>\n\n\n\n
AsyncWebServer server(80);<\/code><\/pre>\n\n\n\nIn the setup()<\/span>, initialize the Serial Monitor:<\/p>\n\n\n\n
Serial.begin(115200);<\/code><\/pre>\n\n\n\nInitialize Wi-Fi:<\/p>\n\n\n\n
WiFi.mode(WIFI_STA);\nWiFi.begin(ssid, password);\nSerial.println(\"\");\n\n\/\/ Wait for connection\nwhile (WiFi.status() != WL_CONNECTED) {\n delay(500);\n Serial.print(\".\");\n}\nSerial.println(\"\");\nSerial.print(\"Connected to \");\nSerial.println(ssid);\nSerial.print(\"IP address: \");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nThen, handle the client requests. The following lines, send some text Hi! I am ESP8266<\/span> when you access the root (\/<\/span>) URL:<\/p>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request) {\n request->send(200, \"text\/plain\", \"Hi! I am ESP8266.\");\n});<\/code><\/pre>\n\n\n\nIf your web server needs to handle more requests you can add them (we’ll show you in the next example).<\/p>\n\n\n\n
Initialize the server:<\/p>\n\n\n\n
server.begin();<\/code><\/pre>\n\n\n\nThen, add the next line to start ElegantOTA:<\/p>\n\n\n\n
ElegantOTA.begin(&server); \/\/ Start ElegantOTA<\/code><\/pre>\n\n\n\nIn the loop()<\/span>, add the following line:<\/p>\n\n\n\n
ElegantOTA.loop();<\/code><\/pre>\n\n\n\nAccessing the Web Server<\/h2>\n\n\n\n
After uploading code to the board, open the Serial Monitor at a baud rate of 115200. Press the ESP8266 on-board RST button. It should display the ESP IP address as follows (yours may be different):<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/esp8266-ip-address.png?resize=723%2C320&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIn your local network, open your browser and type the ESP8266 IP address. You should get access the root (\/<\/span>) web page with some text displayed.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/esp8266-web-server-basic-with-ota.png?resize=587%2C315&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNow, if you want to modify your web server code via OTA, go to the ESP IP address followed by \/update<\/span>. The following web page should load.<\/p>\n\n\n
\n![\"ElegantOTA](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/esp8266-ota-web-server.png?resize=941%2C665&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo upload new code to your board or files to the filesystem, you need to upload them in .bin<\/em> format. Follow the next section to learn how to generate a .bin<\/em> file from your sketch in Arduino IDE.<\/p>\n\n\n\n
Upload New Code to the ESP8266 via OTA<\/h2>\n\n\n\n
Every file that you upload via OTA should be in .bin<\/em> format. You can generate a .bin<\/em> file from your sketch using the Arduino IDE.<\/p>\n\n\n\n
With your sketch opened, you just need to select the ESP8266 board you’re using in Tools<\/strong> > Board<\/strong>, and then go to Sketch <\/strong>> Export Compiled Binary<\/strong>. A .bin<\/em> file will be generated from your sketch.<\/p>\n\n\n
\n![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/export-bin-file-arduino-ide.jpg?resize=383%2C272&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe generated file will be saved under your project folder inside a series of other folders. The file with the .ino.bin<\/em> extension is the one you should upload to your board using the ElegantOTA web page.<\/p>\n\n\n\n
Upload a New Web Server Sketch via OTA – Example<\/h3>\n\n\n\n
Imagine that after uploading the previous sketch, you want to upload a new one that allows you to control an LED via a web interface like this project<\/a>. Here are the steps you need to follow:<\/p>\n\n\n\n
1. Copy the following code to your Arduino IDE. Don’t forget to insert your network credentials.<\/p>\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-ota-elegantota-arduino\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Softwar\n*********\/\n\n\/\/ Import required libraries\n#include <Arduino.h>\n#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h>\n#include <ElegantOTA.h>\n\n\/\/ Replace with your network credentials\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nbool ledState = 0;\nconst int ledPin = 2;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\nAsyncWebSocket ws("\/ws");\n\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html>\n<head>\n <title>ESP Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" href="data:,">\n <style>\n html {\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n }\n h1 {\n font-size: 1.8rem;\n color: white;\n }\n h2{\n font-size: 1.5rem;\n font-weight: bold;\n color: #143642;\n }\n .topnav {\n overflow: hidden;\n background-color: #143642;\n }\n body {\n margin: 0;\n }\n .content {\n padding: 30px;\n max-width: 600px;\n margin: 0 auto;\n }\n .card {\n background-color: #F8F7F9;;\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\n padding-top:10px;\n padding-bottom:20px;\n }\n .button {\n padding: 15px 50px;\n font-size: 24px;\n text-align: center;\n outline: none;\n color: #fff;\n background-color: #0f8b8d;\n border: none;\n border-radius: 5px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n }\n \/*.button:hover {background-color: #0f8b8d}*\/\n .button:active {\n background-color: #0f8b8d;\n box-shadow: 2 2px #CDCDCD;\n transform: translateY(2px);\n }\n .state {\n font-size: 1.5rem;\n color:#8c8c8c;\n font-weight: bold;\n }\n <\/style>\n<title>ESP Web Server<\/title>\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<link rel="icon" href="data:,">\n<\/head>\n<body>\n <div class="topnav">\n <h1>ESP WebSocket Server<\/h1>\n <\/div>\n <div class="content">\n <div class="card">\n <h2>Output - GPIO 2<\/h2>\n <p class="state">state: <span id="state">%STATE%<\/span><\/p>\n <p><button id="button" class="button">Toggle<\/button><\/p>\n <\/div>\n <\/div>\n<script>\n var gateway = `ws:\/\/${window.location.hostname}\/ws`;\n var websocket;\n window.addEventListener('load', onLoad);\n function initWebSocket() {\n console.log('Trying to open a WebSocket connection...');\n websocket = new WebSocket(gateway);\n websocket.onopen = onOpen;\n websocket.onclose = onClose;\n websocket.onmessage = onMessage; \/\/ <-- add this line\n }\n function onOpen(event) {\n console.log('Connection opened');\n }\n function onClose(event) {\n console.log('Connection closed');\n setTimeout(initWebSocket, 2000);\n }\n function onMessage(event) {\n var state;\n if (event.data == "1"){\n state = "ON";\n }\n else{\n state = "OFF";\n }\n document.getElementById('state').innerHTML = state;\n }\n function onLoad(event) {\n initWebSocket();\n initButton();\n }\n function initButton() {\n document.getElementById('button').addEventListener('click', toggle);\n }\n function toggle(){\n websocket.send('toggle');\n }\n<\/script>\n<\/body>\n<\/html>)rawliteral";\n\nvoid notifyClients() {\n ws.textAll(String(ledState));\n}\n\nvoid handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {\n AwsFrameInfo *info = (AwsFrameInfo*)arg;\n if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {\n data[len] = 0;\n if (strcmp((char*)data, "toggle") == 0) {\n ledState = !ledState;\n notifyClients();\n }\n }\n}\n\nvoid onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,\n void *arg, uint8_t *data, size_t len) {\n switch (type) {\n case WS_EVT_CONNECT:\n Serial.printf("WebSocket client #%u connected from %s\\n", client->id(), client->remoteIP().toString().c_str());\n break;\n case WS_EVT_DISCONNECT:\n Serial.printf("WebSocket client #%u disconnected\\n", client->id());\n break;\n case WS_EVT_DATA:\n handleWebSocketMessage(arg, data, len);\n break;\n case WS_EVT_PONG:\n case WS_EVT_ERROR:\n break;\n }\n}\n\nvoid initWebSocket() {\n ws.onEvent(onEvent);\n server.addHandler(&ws);\n}\n\nString processor(const String& var){\n Serial.println(var);\n if(var == "STATE"){\n if (ledState){\n return "ON";\n }\n else{\n return "OFF";\n }\n }\n return String();\n}\n\nvoid setup(){\n \/\/ Serial port for debugging purposes\n Serial.begin(115200);\n\n pinMode(ledPin, OUTPUT);\n digitalWrite(ledPin, LOW);\n \n \/\/ Connect to Wi-Fi\n WiFi.begin(ssid, password);\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.println("Connecting to WiFi..");\n }\n\n \/\/ Print ESP Local IP Address\n Serial.println(WiFi.localIP());\n\n initWebSocket();\n\n \/\/ Route for root \/ web page\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Start server\n server.begin();\n ElegantOTA.begin(&server); \/\/ Start ElegantOTA\n}\n\nvoid loop() {\n ws.cleanupClients();\n digitalWrite(ledPin, !ledState);\n ElegantOTA.loop();\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
This is the same code used in this project<\/a>, but it contains the needed lines of code to handle ElegantOTA:<\/p>\n\n\n\n
#include <ElegantOTA.h><\/code><\/pre>\n\n\n\nElegantOTA.begin(&server);<\/code><\/pre>\n\n\n\nElegantOTA.loop();<\/code><\/pre>\n\n\n\n2. <\/strong>Save your sketch: File<\/strong> > Save <\/strong>and give it a name. For example: ESP8266_WebServer_LED_OTA<\/em>.<\/p>\n\n\n\n
3.<\/strong> Generate a .bin<\/em> file from your sketch. First, select the board model you’re using in Tools<\/strong> > Board<\/strong>. Then, go to Sketch <\/strong>> Export Compiled Binary<\/strong>.<\/p>\n\n\n
\n<\/figure><\/div>\n\n\nGo to your sketch folder. You should have a build<\/em> folder. Inside that folder, you’ll have another folder related to your board model. Open that folder. There’ll be several files. You should upload the file with the ino.bin<\/em> extension.<\/p>\n\n\n
\n![\"bin](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP8266-bin-file-from-sketch.png?resize=673%2C264&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n4.<\/strong> Now, you need to upload that file using the ElegantOTA page. Go to your ESP IP address followed by \/update<\/span>. Make sure you have the firmware<\/strong> option selected. Click on Choose File<\/strong> and select the .ino.bin<\/em> file you’ve just generated.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP8266-upload-new-firmware-OTA.png?resize=857%2C664&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n5.<\/strong> After a few seconds, you should get a success message. Then, click on the Back<\/strong> button.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP8266-OTA_upload-success.png?resize=721%2C528&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n6. <\/strong>Now, you can go to the root (\/<\/span>) URL to access the new web server. This is the page you should see when you access the ESP IP address on the root (\/<\/span>) URL.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/12\/ESP8266-control-gpio-websocket-server.png?resize=823%2C536&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou can click on the button to turn the ESP8266 on-board LED on and off.<\/p>\n\n\n
\n![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-NodeMCU-kit-12-E-on-board-LED.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nBecause we’ve also added OTA capabilities to this new web server, we can upload a new sketch in the future if needed. You just need to go to the ESP8266 IP address followed by \/update<\/span>.<\/p>\n\n\n\n
Congratulations, you’ve uploaded new code to your ESP8266 via Wi-Fi using ElegantOTA.<\/p>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
In this tutorial you’ve learned how to add OTA capabilities to your Async Web Server projects using the ElegantOTA library on the ESP8266 board. This library is straightforward to use\u2014you just need to add three lines of code to your project.<\/p>\n\n\n\n
We hope you’ve found this tutorial useful.<\/p>\n\n\n\n
Learn more about the ESP8266 with our resources:<\/p>\n\n\n\n
- \n
- Home Automation Using ESP8266<\/a> (eBook)<\/li>\n\n\n\n
- Build ESP32 Web Servers with Arduino IDE<\/a> (eBook)<\/li>\n\n\n\n
- More ESP8266 Projects and Tutorials… <\/a><\/li>\n<\/ul>\n\n\n\n
Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"
This tutorial shows how to do OTA (over-the-air) updates to your ESP8266 NodeMCU boards using the ElegantOTA library (V3 version) with Arduino IDE. This library sets up a web server … <\/p>\n
- Build ESP32 Web Servers with Arduino IDE<\/a> (eBook)<\/li>\n\n\n\n
- ESPAsyncTCP<\/a><\/li>\n<\/ul>\n\n\n\n
- Upload new firmware via OTA to the ESP8266 board<\/a><\/li>\n<\/ul>\n\n\n\n