top of page

Complete Guide: Hosting an HTML Website on ESP32 - Step-by-Step Tutorial

To host an HTML website on an ESP32, you can use the ESPAsyncWebServer library, which allows you to set up a web server on the ESP32. Here's a step-by-step tutorial to guide you through the process:

  1. Install the ESPAsyncWebServer library:

    • Open the Arduino IDE.

    • Go to Sketch -> Include Library -> Manage Libraries.

    • Search for "ESPAsyncWebServer" and install the library.


  1. Set up the basic HTML file:


<!DOCTYPE html>

<html>

<body>


<h2>Hello from ESP32!</h2>

<p>This is a simple HTML page hosted on the ESP32 web server.</p>


</body>

</html>


  1. Use the following code as a basic example to host the HTML file on the ESP32:


#include <WiFi.h>

#include <ESPAsyncWebServer.h>


const char* ssid = "your_SSID";

const char* password = "your_PASSWORD";


AsyncWebServer server(80);


void notFound(AsyncWebServerRequest *request) {

request->send(404, "text/plain", "Not found");

}


void setup(){

Serial.begin(115200);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi...");

}


Serial.println("Connected to WiFi");


server.onNotFound(notFound);


server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send(200, "text/html", "<h1>Hello from ESP32!</h1><p>This is a simple HTML page hosted on the ESP32 web server.</p>");

});


server.begin();

}


void loop() {

}


  1. Connect your ESP32 to your computer and upload the code.

  2. Open the Arduino IDE Serial Monitor to check the ESP32's IP address once it connects to the Wi-Fi network.

  3. Open a web browser and type the IP address of the ESP32 into the address bar. You should see the HTML page displayed.

Make sure to replace "your_SSID" and "your_PASSWORD" with your actual Wi-Fi credentials. This basic example demonstrates how to host a simple HTML page, but you can extend it to serve more complex web content or dynamic web pages from the ESP32.


407 views0 comments

Recent Posts

See All

Comments


bottom of page