![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/03\/ESP-IDF-ESP32-Simple-Web-Server-Serve-HTML-Page.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUsing Arduino IDE?<\/strong> Follow this tutorial instead: Building an ESP32 Web Server: The Complete Guide for Beginners (Arduino IDE)<\/a>.<\/p>\n\n\n\n Before following this guide, you need to install the ESP-IDF extension on VS Code IDE (Microsoft Visual Studio Code). Follow the next guide to install it, if you haven’t already:<\/p>\n\n\n\n You will also need an ESP32 development board<\/a> model of your choice.<\/p>\n\n\n\n In simple terms, a web server is a \u201ccomputer\u201d that delivers web pages. It stores the website\u2019s files, including HTML documents and related assets like images, CSS style sheets, fonts, and other files. When a user makes a request, the server sends those files to the user\u2019s web browser.<\/p>\n\n\n\n When you access a web page in your browser, you\u2019re actually sending a request to a server using HTTP. This protocol handles how information is requested and delivered on the Internet. The server then responds by sending the web page you asked for, also through HTTP.<\/p>\n\n\n\n When you type a URL in your browser, your device (the client) sends a request to a server using the Hypertext Transfer Protocol (HTTP). The server receives the request and responds\u2014also via HTTP\u2014by sending back the web page.<\/p>\n\n\n Throughout this tutorial, we\u2019ll treat the ESP32 as the server, and you, using your browser, as the client.<\/p>\n\n\n\n For this tutorial, let\u2019s take a look at a practical example with the ESP32 that acts as a local web server in the local network.<\/p>\n\n\n\n Typically, a web server with the ESP32 in the local network looks like this: the ESP32 running as a web server is connected via Wi-Fi to your router. Your computer, smartphone, or tablet, are also connected to your router via Wi-Fi or Ethernet cable. So, the ESP32 and your browser are on the same network.<\/p>\n\n\n When you type the ESP32 IP address in your browser, you are sending an HTTP request to your ESP32. Then, the ESP32 responds with a response that can contain a value, a reading, HTML text to display a web page, or any other data.<\/p>\n\n\n In this particular tutorial, when you type the ESP32 IP address in your web browser, the ESP32 will respond by sending HTML text to create a simple web page (the page shown in the picture below).<\/p>\n\n\n For simplicity, we’re creating this very simple web page. This example can then be further expanded to add buttons or text fields to control and monitor the ESP32 GPIOs (we’ll cover this in future tutorials).<\/p>\n\n\n\n The ESP-IDF extension provides an easy way to create a project from scratch with all the required files and configurations generated automatically.<\/p>\n\n\n\n To create a new ESP-IDF project on VS Code, follow these steps:<\/p>\n\n\n\n A new window opens, you need to fill in these fields:<\/p>\n\n\n\n In the menu, select the “ESP-IDF Templates<\/strong>” sample project and press the “Create project using template sample project<\/strong>” button.<\/p>\n\n\n After a few seconds, a notification will appear in a new window in VS Code. You can click “Open Project<\/strong>” to open the newly created ESP-IDF sample project template.<\/p>\n\n\n IMPORTANT:<\/strong> if you didn’t see the notification that allows you to automatically open the ESP-IDF project on VS Code, you can easily do it by following these instructions:<\/p>\n\n\n\n Go to File <\/strong>> Open Folder…<\/strong><\/p>\n\n\n Browse on your computer for the esp-idf-project folder<\/em> (your project folder name that you’ve previously defined) and “Select Folder<\/strong>“.<\/p>\n\n\n That’s it! Your new ESP-IDF project template has been successfully created and opened.<\/p>\n\n\n\n ESP-IDF generates many files, folders, and subfolders for your project. For this guide, I recommend keeping all the default files unchanged; we will only modify the main.c<\/em> file.<\/p>\n\n\n\n The example code will be written in the main.c<\/em> file. To open it, follow these instructions:<\/p>\n\n\n\n The Kconfig.projbuild<\/em> file in ESP-IDF is a configuration file placed in a project’s main folder to define custom options in the SDK Configuration Editor (menuconfig tool). This allows users to set specific settings like strings or values that will be used during build configuration.<\/p>\n\n\n\n To create the Kconfig.projbuild<\/em> file, go to the File Explorer left sidebar and right-click on top of the main <\/em>folder. Then, select the “New File…<\/strong>” option:<\/p>\n\n\n Name the new file exactly as follows: Kconfig.projbuild<\/em><\/span> and copy the content (shown after the following screenshot) to your newly created file.<\/p>\n\n\n Save the file content. This will create a new menu called “Wi-Fi Configuration<\/em>” in the SDK Configuration Editor where you can type you SSID and Password, so the ESP can connect to your network.<\/p>\n\n\n\n Having the Kconfig.projbuild<\/em> file prepared, click the gear icon to open the SDK Configuration Editor (menuconfig).<\/p>\n\n\n Now, instead of typing your network credentials inside the main.c<\/em> file, you can configure them in the menuconfig tool. Follow these next steps:<\/p>\n\n\n\n Copy the following code to the main.c<\/em> file. This code serves a basic HTML web page hosted on an ESP32 with some text content.<\/p>\n\n\nPrerequisites<\/h2>\n\n\n\n
\n
Introducing Web Servers<\/h2>\n\n\n\n
Client-Server (ESP32 as a Server)<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/esp32-client-server-communication-f.png?resize=750%2C271&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nESP-IDF: ESP32 Web Server<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-Wi-Fi-Client-Connected-1.png?resize=750%2C200&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/04\/ESP32-Web-Server-Wi-Fi-Clients-Request-Response.png?resize=750%2C214&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/03\/ESP-IDF-ESP32-Simple-Web-Server-Serve-HTML-Web-Page-Demonstration.png?resize=628%2C385&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCreating an ESP-IDF Template App Project for the ESP32<\/h2>\n\n\n\n
\n
![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP-IDF-ESP32-Create-Open-New-Project-Wizard-Menu.png?resize=937%2C742&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP-IDF-ESP32-Create-Open-New-Project-Wizard-Menu-Select-Directory-Board-Template.png?resize=983%2C856&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP-IDF-ESP32-Create-New-Sample-Project-using-IDF-Template.png?resize=1178%2C744&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nOpening the ESP-IDF Project on VS Code<\/h3>\n\n\n\n
![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/01\/ESP-IDF-ESP32-Open-New-Project-Sample.png?resize=1024%2C503&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP-IDF-ESP32-Open-Project-Folder-VS-Code-File-Menu.png?resize=396%2C315&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP-IDF-ESP32-Open-Project-VS-Code-Select-Folder.png?resize=667%2C366&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP-IDF](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/ESP-IDF-ESP32-Open-Project-in-a-VS-Code-Browse-to-Main-C-File.png?resize=907%2C571&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCreate the Wi-Fi Config Options File – Kconfig.projbuild<\/h2>\n\n\n\n
![\"Create](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/03\/Create-new-file-main-folder-Kconfig-projbuild.png?resize=626%2C416&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Kconfig](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/03\/Kconfig-projbuild-Wi-Fi-Configuration-File.png?resize=1012%2C512&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nmenu \"Wi-Fi Configuration\"\n config ESP_WIFI_SSID\n string \"WiFi SSID\"\n help\n SSID (network name) you want to connect to.\n\n config ESP_WIFI_PASSWORD\n string \"WiFi Password\"\n help\n Password of the Wi-Fi network you want to connect to.\nendmenu<\/code><\/pre>\n\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/03\/Open-SDK-Configuration-Editor-Menuconfig-Wi-Fi-Configuration.png?resize=655%2C444&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"SDK](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2026\/03\/SDK-Configuration-Editor-Menuconfig-Kconfig-projbuild-Wi-Fi-Configuration-SSID-Password.png?resize=1024%2C414&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCode: ESP32 Simple Web Server using ESP-IDF<\/h2>\n\n\n\n
\/* \n Rui Santos & Sara Santos - Random Nerd Tutorials\n https:\/\/RandomNerdTutorials.com\/esp-idf-esp32-web-server\/\n*\/\n#include <stdio.h>\n#include <string.h>\n#include "freertos\/FreeRTOS.h"\n#include "freertos\/task.h"\n#include "esp_system.h"\n#include "esp_wifi.h"\n#include "esp_event.h"\n#include "esp_log.h"\n#include "nvs_flash.h"\n#include "esp_netif.h"\n#include "esp_http_server.h"\n#include "sdkconfig.h"\n\n#define MY_ESP_WIFI_SSID CONFIG_ESP_WIFI_SSID\n#define MY_ESP_WIFI_PASS CONFIG_ESP_WIFI_PASSWORD\n\nstatic const char *TAG = "web_server";\n\n\/\/ HTML web page to serve \nstatic const char *html_page = \n "<!DOCTYPE html>"\n "<html>"\n "<head>"\n "<title>ESP-IDF: ESP32 Web Server<\/title>"\n "<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">"\n "<\/head>"\n "<body>"\n "<h1>ESP-IDF: ESP32 Web Server<\/h1>"\n "<p>Hello from ESP32!<\/p>"\n "<\/body>"\n "<\/html>";\n\n\/\/ (Another option) HTML web page to serve (can be defined as a raw string literal for better readability)\n\/*\nstatic const char *html_page = R"raw(\n<!DOCTYPE html>\n<html>\n<head>\n <title>ESP-IDF: ESP32 Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n<\/head>\n<body>\n <h1>ESP-IDF: ESP32 Web Server<\/h1>\n <p>Hello from ESP32!<\/p>\n<\/body>\n<\/html>\n)raw";*\/\n\n\/\/ HTTP GET handler for root "\/"\nstatic esp_err_t root_get_handler(httpd_req_t *req)\n{\n httpd_resp_set_type(req, "text\/html");\n httpd_resp_send(req, html_page, HTTPD_RESP_USE_STRLEN);\n return ESP_OK;\n}\n\n\/\/ Start the HTTP server\nstatic httpd_handle_t start_web_server(void)\n{\n httpd_config_t config = HTTPD_DEFAULT_CONFIG();\n httpd_handle_t server = NULL;\n\n if (httpd_start(&server, &config) == ESP_OK) {\n ESP_LOGI(TAG, "HTTP server started on port %d", config.server_port);\n \n \/\/ Register URI handler\n httpd_uri_t uri_get = {\n .uri = "\/",\n .method = HTTP_GET,\n .handler = root_get_handler,\n .user_ctx = NULL\n };\n httpd_register_uri_handler(server, &uri_get);\n \n return server;\n }\n \n ESP_LOGE(TAG, "Failed to start HTTP server");\n return NULL;\n}\n\n\/\/ Wi-Fi and IP event handler\nstatic void wifi_event_handler(void* arg, esp_event_base_t event_base,\n int32_t event_id, void* event_data)\n{\n if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_START) {\n ESP_LOGI(TAG, "Wi-Fi STA started. Connecting to %s...", MY_ESP_WIFI_SSID);\n esp_wifi_connect();\n } else if (event_base == WIFI_EVENT && event_id == WIFI_EVENT_STA_DISCONNECTED) {\n ESP_LOGW(TAG, "Wi-Fi disconnected. Retrying connection...");\n esp_wifi_connect();\n } else if (event_base == IP_EVENT && event_id == IP_EVENT_STA_GOT_IP) {\n ip_event_got_ip_t* event = (ip_event_got_ip_t*) event_data;\n ESP_LOGI(TAG, "Got IP Address: " IPSTR, IP2STR(&event->ip_info.ip));\n ESP_LOGI(TAG, "Web Server ready! Access at http:\/\/" IPSTR "\/", IP2STR(&event->ip_info.ip));\n }\n}\n\nvoid app_main(void)\n{\n \/\/ Initialize NVS\n esp_err_t ret = nvs_flash_init();\n if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {\n ESP_ERROR_CHECK(nvs_flash_erase());\n ret = nvs_flash_init();\n }\n ESP_ERROR_CHECK(ret);\n\n \/\/ Initialize TCP\/IP stack and event loop\n ESP_ERROR_CHECK(esp_netif_init());\n ESP_ERROR_CHECK(esp_event_loop_create_default());\n\n \/\/ Create default Wi-Fi STA interface\n esp_netif_create_default_wifi_sta();\n\n \/\/ Initialize Wi-Fi\n wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();\n ESP_ERROR_CHECK(esp_wifi_init(&cfg));\n\n \/\/ Register event handlers\n ESP_ERROR_CHECK(esp_event_handler_instance_register(WIFI_EVENT,\n ESP_EVENT_ANY_ID,\n &wifi_event_handler,\n NULL, NULL));\n ESP_ERROR_CHECK(esp_event_handler_instance_register(IP_EVENT,\n IP_EVENT_STA_GOT_IP,\n &wifi_event_handler,\n NULL, NULL));\n\n \/\/ Configure Wi-Fi STA\n wifi_config_t wifi_config = {\n .sta = {\n .ssid = MY_ESP_WIFI_SSID,\n .password = MY_ESP_WIFI_PASS,\n },\n };\n ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));\n ESP_ERROR_CHECK(esp_wifi_set_config(WIFI_IF_STA, &wifi_config));\n ESP_ERROR_CHECK(esp_wifi_start());\n\n \/\/ Start the web server (it will be ready once IP is assigned)\n httpd_handle_t server = start_web_server();\n if (server) {\n ESP_LOGI(TAG, "Web Server initialized. Waiting for Wi-Fi connection...");\n }\n}\n<\/code><\/pre>\n\t
![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/VS-Code-Check-All-the-Configured-Settings-UART-COM-Port-Target-Board.png?resize=498%2C28&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/VS-Code-Select-Flash-UART-Option-to-Program-Flash-ESP32-1024x584.png?resize=1024%2C584&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/VS-Code-Programming-ESP32-Board-Select-Correct-COM-Port-Number.png?resize=1024%2C582&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/VS-Code-Select-the-ESP32-S3-or-Correct-Target-Device.png?resize=1024%2C579&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/05\/VS-Code-Select-the-ESP32-S3-chip-via-built-in-USB-JTAG-Target-Device.png?resize=757%2C579&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/06\/VS-Code-Build-Project-Example-Code-ESP32-ESP-IDF.png?resize=581%2C359&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"VS](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2025\/06\/VS-Code-Build-Example-Project-ESP32-ESP-IDF-Success-Message.jpg?resize=648%2C468&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n