Welcome to Yarana IoT Guru! 🌟

Are you tired of re-uploading code every time you want to change the WiFi credentials on your ESP32? What if you could change your ESP32’s WiFi connection dynamically using a web dashboard?

In this guide, you’ll learn how to build an ESP32 WiFi configuration dashboard that lets you:
✅ Change WiFi credentials without re-uploading the code
✅ Manage and switch between different networks dynamically
✅ Use AsyncWebServer and WebSockets for real-time updates

👉 📥 Download Complete Code:
🔗 ESP32 WiFi Config Dashboard GitHub Repo

🎯 What You Will Learn in This Guide?

✔️ How to set up a dynamic web dashboard for ESP32 WiFi management
✔️ Using AsyncWebServer and WebSockets for real-time data updates
✔️ Step-by-step ESP32 code walkthrough for seamless WiFi configuration
✔️ Live demonstration of changing WiFi networks on ESP32

🛠 Tools & Technologies Used

✅ ESP32 Microcontroller – The brain of our project
✅ AsyncWebServer – For creating a web-based dashboard
✅ WebSockets – For real-time two-way communication
✅ SPIFFS (SPI Flash File System) – For storing WiFi credentials
✅ HTML/CSS & JavaScript – For building the interactive web interface

📌 Why Do You Need a Web-Based WiFi Configuration Dashboard?

Usually, ESP32 stores WiFi credentials inside the code, requiring you to reprogram it every time you change networks. This can be a major inconvenience in IoT projects.

By using a web-based dashboard, you can:
🔹 Change WiFi settings easily from any device (mobile, laptop, etc.)
🔹 Save WiFi credentials in SPIFFS (so they persist after reboot)
🔹 Improve user experience in IoT projects

🚀 Step-by-Step Guide to ESP32 WiFi Configuration Dashboard

Step 1: Setting Up the ESP32 Development Environment

Before we start, ensure you have:
✔️ Arduino IDE installed with ESP32 board support
✔️ AsyncWebServer library and WebSockets library installed
✔️ An ESP32 board

📥 Required Libraries

Install the following libraries from Arduino Library Manager:

nginxCopyEditESPAsyncWebServer  
ESPAsyncTCP  
FS  
SPIFFS  
ArduinoJSON  

Step 2: Uploading the Web Files to ESP32 (SPIFFS)

Since we want the WiFi configuration page to be accessible via a web browser, we will store HTML, CSS, and JavaScript files in SPIFFS.

To do this:

1. Install the ESP32 SPIFFS Uploader Plugin
2. Store the HTML, CSS, and JavaScript files inside the /data folder
3. Upload the files using the ESP32 Sketch Data Upload tool

This ensures that the dashboard is stored inside the ESP32’s flash memory, making it accessible even after a reset.

Step 3: Writing the ESP32 WiFi Management Code

Below is a simplified version of the code to handle WiFi credentials, WebSockets, and SPIFFS storage:

1️⃣ Load Saved WiFi Credentials

cppCopyEdit#include <WiFi.h>
#include <FS.h>
#include <SPIFFS.h>

String ssid = "";
String password = "";

// Function to load saved WiFi credentials from SPIFFS
void loadWiFiConfig() {
    File file = SPIFFS.open("/wifi_config.txt", "r");
    if (!file) {
        Serial.println("Failed to open WiFi config file.");
        return;
    }
    ssid = file.readStringUntil('\n');
    password = file.readStringUntil('\n');
    file.close();
}

2️⃣ Connect to WiFi Automatically

cppCopyEditvoid connectToWiFi() {
    WiFi.begin(ssid.c_str(), password.c_str());
    Serial.print("Connecting to WiFi...");
    int attempts = 0;
    while (WiFi.status() != WL_CONNECTED && attempts < 20) {
        delay(1000);
        Serial.print(".");
        attempts++;
    }
    if (WiFi.status() == WL_CONNECTED) {
        Serial.println("\nConnected to WiFi!");
    } else {
        Serial.println("\nFailed to connect.");
    }
}

3️⃣ Handle WiFi Configuration from the Web Dashboard

cppCopyEdit#include <ESPAsyncWebServer.h>
AsyncWebServer server(80);

void setupServer() {
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/index.html", "text/html");
    });

    server.on("/setWiFi", HTTP_POST, [](AsyncWebServerRequest *request) {
        String newSSID = request->arg("ssid");
        String newPassword = request->arg("password");

        File file = SPIFFS.open("/wifi_config.txt", "w");
        if (file) {
            file.println(newSSID);
            file.println(newPassword);
            file.close();
            request->send(200, "text/plain", "WiFi settings saved! Rebooting...");
            delay(2000);
            ESP.restart();
        } else {
            request->send(500, "text/plain", "Failed to save WiFi settings.");
        }
    });

    server.begin();
}

Step 4: Testing & Demonstration

1️⃣ Upload the code to your ESP32
2️⃣ Connect to the ESP32’s Access Point (if not connected to a router)
3️⃣ Go to the Web Dashboard (IP address displayed in Serial Monitor)
4️⃣ Enter New WiFi Credentials and save
5️⃣ ESP32 will reboot and connect to the new network

✅ Congratulations! You have successfully created a dynamic WiFi configuration dashboard for ESP32. 🚀

📺 Watch the Full Video Tutorial

🔴 ESP32 WiFi Configuration Video on Yarana IoT Guru

📢 Check out our GitHub Repo for the full source code!
👉 Download Code

📌 Frequently Asked Questions (FAQs)

❓ Can I use this method on ESP8266?
✅ Yes! The concept is similar, but you need to modify the libraries for ESP8266.

❓ How do I reset WiFi credentials?
✅ Simply go to the dashboard and enter new WiFi details.

❓ What if ESP32 fails to connect to WiFi?
✅ It will switch to Access Point mode, allowing you to reconfigure WiFi.

🚀 Final Thoughts

This ESP32 WiFi Configuration Dashboard is a powerful feature for any IoT project. It allows users to dynamically change WiFi settings without re-uploading the code, making IoT deployments much easier.

✅ Try this project and take your IoT skills to the next level!