Required parts and tools<\/h3>\n\n- One ESP32 board, connected to your Wi-Fi as in the previous tutorial.<\/li>\n
- An LED and a 220 ohm resistor on
GPIO 4<\/code>, so there is something to switch.<\/li>\n- A phone or computer on the same network.<\/li>\n<\/ul>\n
What a request actually is<\/h3>\n
When a browser opens http:\/\/192.168.1.50\/<\/code>, it connects and sends a line of text:<\/p>\nGET \/ HTTP\/1.1<\/code><\/pre>\nThe server replies with a status line, a blank line, and the page. That is genuinely all it is, and the first example does exactly that by hand so the mechanism is visible.<\/p>\n
The \/<\/code> is the path<\/strong>, and it is how one server offers several things. \/on<\/code> and \/off<\/code> are paths too, which is how the buttons below work.<\/p>\nTwo ways to write this<\/h3>\n
By hand<\/strong>, with WiFiServer<\/code>, reading the request as text. More code, no dependencies, and you can see every part of it.<\/p>\nWith a library<\/strong>, such as WebServer<\/code>, which comes with the ESP32 package. You register a function per path and it does the rest.<\/p>\nThis page does the first once, to show what is happening, then switches to the second, which is what you should actually use.<\/p>\n
Do not put it on the internet<\/h3>\n
What follows is fine on your home network and is not safe to expose to the internet<\/strong>.<\/p>\nThere is no password, no encryption, and no protection against anything. Forwarding a port on your router to this board means anybody who finds it can switch your relay. The code here has no defences and is not trying to have any.<\/p>\n
If a project genuinely needs remote access, the right shape is the board making outbound connections to a service, as in the MQTT tutorial, rather than accepting inbound ones.<\/p>\n
Pin reference<\/h2>\n
\n\n\nPin<\/th>\n Purpose<\/th>\n Notes<\/th>\n<\/tr>\n<\/thead>\n \n\nGPIO 4<\/code><\/td>\nLED through 220 ohms<\/td>\n Any general-purpose pin<\/td>\n<\/tr>\n \nGPIO 34<\/code><\/td>\nA sensor, optional<\/td>\n ADC1, so it survives Wi-Fi<\/td>\n<\/tr>\n \nGND<\/code><\/td>\nGround<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n![\"An](\"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg\")
The browser sends a path; the board replies with a page. Buttons are just links to different paths.<\/figcaption><\/figure>\nWiring steps<\/h2>\n\n- Unplug the USB cable.<\/li>\n
- LED through a 220 ohm resistor from
GPIO 4<\/code> to GND<\/code>, long leg to the resistor.<\/li>\n- Plug the USB cable back in.<\/li>\n<\/ol>\n
Software and libraries<\/h2>\n
Both libraries used here come with the ESP32 board package. Nothing to install.<\/p>\n
Minimal working example<\/h2>\n
The long way first, so the exchange is visible.<\/p>\n
\/\/ Siratek: a web server written out by hand, so you can see the request.\n\n#include <WiFi.h>\n\nconst char* ssid = \"your network name\";\nconst char* password = \"your password\";\n\nWiFiServer server(80);\n\nvoid setup() {\n Serial.begin(115200);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n\n unsigned long start = millis();\n while (WiFi.status() != WL_CONNECTED && millis() - start < 20000) {\n delay(500);\n }\n\n if (WiFi.status() != WL_CONNECTED) {\n Serial.println(\"Siratek: no Wi-Fi. See the previous tutorial.\");\n return;\n }\n\n server.begin();\n Serial.print(\"Siratek: open http:\/\/\");\n Serial.println(WiFi.localIP());\n}\n\nvoid loop() {\n WiFiClient client = server.accept();\n if (!client) {\n return;\n }\n\n \/\/ Read the first line, which holds the method and the path.\n String request = client.readStringUntil('\\r');\n Serial.print(\"request: \");\n Serial.println(request);\n client.readStringUntil('\\n');\n\n client.println(\"HTTP\/1.1 200 OK\");\n client.println(\"Content-Type: text\/html\");\n client.println(\"Connection: close\");\n client.println(); \/\/ the blank line matters\n client.println(\"<!DOCTYPE html><html><body>\");\n client.println(\"<h1>Siratek<\/h1><p>Hello from an ESP32.<\/p>\");\n client.println(\"<\/body><\/html>\");\n\n client.stop();\n}<\/code><\/pre>\naccept()<\/code>, not available()<\/code>.<\/strong> Older code and older tutorials write server.available()<\/code> here, and on ESP32 core 2.x that was the only name. Core 3 renamed it to accept()<\/code> and left the old name in place as deprecated, so available()<\/code> still works but the compiler now warns about it. If you are on core 2.x the line must read available()<\/code>; the Boards Manager tells you which version you have.<\/p>\nThe blank line is not optional.<\/strong> It separates the headers from the page, and without it the browser waits for headers that never end and eventually gives up. It is the most common mistake in hand-written servers.<\/p>\nWatch the serial monitor while you load the page. You will usually see two<\/strong> requests: one for the page and one for \/favicon.ico<\/code>, which the browser asks for automatically. That surprises people and is normal.<\/p>\nThe useful version<\/h3>\n\/\/ Siratek: a page showing a reading, with buttons that work.\n\n#include <WiFi.h>\n#include <WebServer.h>\n\nconst char* ssid = \"your network name\";\nconst char* password = \"your password\";\n\nWebServer server(80);\n\nconst int ledPin = 4;\nconst int sensorPin = 34; \/\/ ADC1, so Wi-Fi does not break it\n\nbool ledOn = false;\n\nString page() {\n int reading = analogRead(sensorPin);\n\n String html = \"<!DOCTYPE html><html><head>\";\n html += \"<meta name='viewport' content='width=device-width,initial-scale=1'>\";\n html += \"<title>Siratek<\/title>\";\n html += \"<style>body{font-family:system-ui;margin:2rem;line-height:1.6}\";\n html += \"a{display:inline-block;padding:.6rem 1.2rem;margin-right:.5rem;\";\n html += \"background:#0f766e;color:#fff;text-decoration:none;border-radius:6px}<\/style>\";\n html += \"<\/head><body>\";\n html += \"<h1>Siratek sensor node<\/h1>\";\n html += \"<p>Reading: <strong>\" + String(reading) + \"<\/strong> of 4095<\/p>\";\n html += \"<p>LED is <strong>\" + String(ledOn ? \"on\" : \"off\") + \"<\/strong><\/p>\";\n html += \"<p><a href='\/on'>Turn on<\/a><a href='\/off'>Turn off<\/a><\/p>\";\n html += \"<\/body><\/html>\";\n\n return html;\n}\n\nvoid handleRoot() {\n server.send(200, \"text\/html\", page());\n}\n\nvoid handleOn() {\n ledOn = true;\n digitalWrite(ledPin, HIGH);\n \/\/ Redirect back to the main page, so a refresh does not switch it again.\n server.sendHeader(\"Location\", \"\/\");\n server.send(303);\n}\n\nvoid handleOff() {\n ledOn = false;\n digitalWrite(ledPin, LOW);\n server.sendHeader(\"Location\", \"\/\");\n server.send(303);\n}\n\nvoid setup() {\n pinMode(ledPin, OUTPUT);\n Serial.begin(115200);\n\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n unsigned long start = millis();\n while (WiFi.status() != WL_CONNECTED && millis() - start < 20000) {\n delay(500);\n }\n if (WiFi.status() != WL_CONNECTED) {\n Serial.println(\"Siratek: no Wi-Fi.\");\n return;\n }\n\n server.on(\"\/\", handleRoot);\n server.on(\"\/on\", handleOn);\n server.on(\"\/off\", handleOff);\n server.onNotFound([]() {\n server.send(404, \"text\/plain\", \"Not found\");\n });\n\n server.begin();\n Serial.print(\"Siratek: open http:\/\/\");\n Serial.println(WiFi.localIP());\n}\n\nvoid loop() {\n server.handleClient(); \/\/ must be called often\n}<\/code><\/pre>\nFour decisions here are worth more than the rest of the code.<\/p>\n
The viewport meta tag.<\/strong> Without it a phone renders the page as if it were a desktop and everything is tiny. One line, and the page is usable on the device people will actually open it on.<\/p>\nThe redirect after switching.<\/strong> Without it, \/on<\/code> returns the page directly, the browser\u2019s address bar still says \/on<\/code>, and the next refresh switches it on again. With a user that is merely odd; with a relay it means a reload can re-trigger an action. Redirecting back to \/<\/code> means a refresh only ever reloads the page.<\/p>\nThe sensor is on an ADC1 pin.<\/strong> On ADC2 it would read nothing at all once Wi-Fi started, and the sketch would look broken for no visible reason.<\/p>\nserver.handleClient()<\/code> must be called often.<\/strong> Anything that blocks loop()<\/code> makes the page unresponsive. Use the millis()<\/code> pattern for periodic work, never delay()<\/code>.<\/p>\nWhy not just auto-refresh<\/h3>\n
The usual next step is a meta refresh tag that reloads the page every few seconds. It works, and it has two costs: the whole page is rebuilt and resent each time, and the page visibly flickers.<\/p>\n
The better shape is to serve the number separately and let the browser fetch just that:<\/p>\n
server.on(\"\/reading\", []() {\n server.send(200, \"text\/plain\", String(analogRead(sensorPin)));\n});<\/code><\/pre>\nThen a few lines of JavaScript in the page update one element:<\/p>\n
<script>\nsetInterval(async () => {\n const r = await fetch('\/reading');\n document.getElementById('v').textContent = await r.text();\n}, 2000);\n<\/script><\/code><\/pre>\nThe page loads once. Only the number moves. That is a reasonable amount of web knowledge to pick up for the improvement it gives.<\/p>\n
Expected result<\/h2>\n
An IP address on the serial monitor, and a page at that address from any device on the network, showing the reading and two working buttons.<\/p>\n
Open it on a phone. If the text is minute, the viewport tag is missing.<\/p>\n
Troubleshooting<\/h2>\n
\n\n\nSymptom<\/th>\n Likely cause<\/th>\n Check or fix<\/th>\n<\/tr>\n<\/thead>\n \n\nBrowser hangs, never loads<\/td>\n Missing blank line after the headers<\/td>\n client.println()<\/code> with no argument<\/td>\n<\/tr>\n\nPage loads once then stops<\/td>\n handleClient()<\/code> not called often<\/td>\nNothing in loop()<\/code> may block<\/td>\n<\/tr>\n\nReading always 0 or 4095<\/td>\n Sensor on an ADC2 pin<\/td>\n Use 32 to 39<\/td>\n<\/tr>\n \nRefresh switches the LED again<\/td>\n No redirect after the action<\/td>\n Send a 303 back to \/<\/code><\/td>\n<\/tr>\n\nTwo requests per page load<\/td>\n Browser asking for the favicon<\/td>\n Normal<\/td>\n<\/tr>\n \navailable()<\/code> is deprecated<\/td>\nCore 3 renamed it<\/td>\n Use accept()<\/code>; available()<\/code> on core 2.x<\/td>\n<\/tr>\n\nTiny text on a phone<\/td>\n No viewport meta tag<\/td>\n Add it<\/td>\n<\/tr>\n \nWorks on the laptop, not the phone<\/td>\n Phone on mobile data or another network<\/td>\n Same Wi-Fi<\/td>\n<\/tr>\n \nAddress stopped working<\/td>\n Router gave a new address<\/td>\n Reserve it, or use mDNS<\/td>\n<\/tr>\n \nBoard resets under load<\/td>\n Current during transmission<\/td>\n Better cable and port<\/td>\n<\/tr>\n \nPage slow to respond<\/td>\n delay()<\/code> in loop()<\/code><\/td>\nUse the millis()<\/code> pattern<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nNext steps<\/h2>\n\n- Easier first:<\/strong> ESP32, Your First Wi-Fi Project<\/em>.<\/li>\n
- Related:<\/strong> the relay tutorial, if the button should switch something real, and its safety section before you do.<\/li>\n
- Next project:<\/strong> a weather station page, serving a DHT22 reading to any phone in the house.<\/li>\n<\/ul>\n
Sources and attribution<\/h2>\n
All text, wiring guidance and code in this tutorial are original Siratek work.<\/p>\n
\n- Arduino-ESP32 documentation for the
WiFi<\/code>, WiFiServer<\/code> and WebServer<\/code> interfaces.<\/li>\n- HTTP\u2019s request line, status codes and header-body separation are defined by the HTTP specification; they are described here in the plainest terms that make the code make sense.<\/li>\n<\/ul>\n
The warning against exposing this server to the internet is a deliberate limitation of scope. No third-party tutorial text, diagrams, photographs or code has been reproduced here.<\/p>\n
<\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"
The board becomes a small web server on your network. Type its address into a phone and you get a page showing a sensor reading, with buttons that switch something on and off.<\/p>\n","protected":false},"featured_media":0,"template":"","siratek_tutorial_level":[],"class_list":["post-52235","siratek_tutorial","type-siratek_tutorial","status-publish","hentry"],"yoast_head":"\n
Serving a Page from an ESP32 - siratek<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Serving a Page from an ESP32 - siratek\" \/>\n<meta property=\"og:description\" content=\"The board becomes a small web server on your network. Type its address into a phone and you get a page showing a sensor reading, with buttons that switch something on and off.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/\" \/>\n<meta property=\"og:site_name\" content=\"siratek\" \/>\n<meta property=\"og:image\" content=\"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/\",\"url\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/\",\"name\":\"Serving a Page from an ESP32 - siratek\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/siratek.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/siratek.net\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/esp32-web-server-wiring.svg\",\"datePublished\":\"2026-11-01T10:50:43+00:00\",\"breadcrumb\":{\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#primaryimage\",\"url\":\"https:\\\/\\\/siratek.net\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/esp32-web-server-wiring.svg\",\"contentUrl\":\"https:\\\/\\\/siratek.net\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/esp32-web-server-wiring.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/siratek.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Serving a Page from an ESP32\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/siratek.net\\\/#website\",\"url\":\"https:\\\/\\\/siratek.net\\\/\",\"name\":\"siratek\",\"description\":\"Your Best Electronic Retail Shop\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/siratek.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Serving a Page from an ESP32 - siratek","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","og_locale":"en_US","og_type":"article","og_title":"Serving a Page from an ESP32 - siratek","og_description":"The board becomes a small web server on your network. Type its address into a phone and you get a page showing a sensor reading, with buttons that switch something on and off.","og_url":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","og_site_name":"siratek","og_image":[{"url":"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","url":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","name":"Serving a Page from an ESP32 - siratek","isPartOf":{"@id":"https:\/\/siratek.net\/#website"},"primaryImageOfPage":{"@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#primaryimage"},"image":{"@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#primaryimage"},"thumbnailUrl":"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg","datePublished":"2026-11-01T10:50:43+00:00","breadcrumb":{"@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#primaryimage","url":"https:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg","contentUrl":"https:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg"},{"@type":"BreadcrumbList","@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siratek.net\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/siratek.net\/index.php\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Serving a Page from an ESP32"}]},{"@type":"WebSite","@id":"https:\/\/siratek.net\/#website","url":"https:\/\/siratek.net\/","name":"siratek","description":"Your Best Electronic Retail Shop","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siratek.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial\/52235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial"}],"about":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/types\/siratek_tutorial"}],"version-history":[{"count":0,"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial\/52235\/revisions"}],"wp:attachment":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/media?parent=52235"}],"wp:term":[{"taxonomy":"siratek_tutorial_level","embeddable":true,"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial_level?post=52235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
GPIO 4<\/code>, so there is something to switch.<\/li>\n- A phone or computer on the same network.<\/li>\n<\/ul>\n
What a request actually is<\/h3>\n
When a browser opens http:\/\/192.168.1.50\/<\/code>, it connects and sends a line of text:<\/p>\nGET \/ HTTP\/1.1<\/code><\/pre>\nThe server replies with a status line, a blank line, and the page. That is genuinely all it is, and the first example does exactly that by hand so the mechanism is visible.<\/p>\n
The \/<\/code> is the path<\/strong>, and it is how one server offers several things. \/on<\/code> and \/off<\/code> are paths too, which is how the buttons below work.<\/p>\nTwo ways to write this<\/h3>\n
By hand<\/strong>, with WiFiServer<\/code>, reading the request as text. More code, no dependencies, and you can see every part of it.<\/p>\nWith a library<\/strong>, such as WebServer<\/code>, which comes with the ESP32 package. You register a function per path and it does the rest.<\/p>\nThis page does the first once, to show what is happening, then switches to the second, which is what you should actually use.<\/p>\n
Do not put it on the internet<\/h3>\n
What follows is fine on your home network and is not safe to expose to the internet<\/strong>.<\/p>\nThere is no password, no encryption, and no protection against anything. Forwarding a port on your router to this board means anybody who finds it can switch your relay. The code here has no defences and is not trying to have any.<\/p>\n
If a project genuinely needs remote access, the right shape is the board making outbound connections to a service, as in the MQTT tutorial, rather than accepting inbound ones.<\/p>\n
Pin reference<\/h2>\n
\n\n\nPin<\/th>\n Purpose<\/th>\n Notes<\/th>\n<\/tr>\n<\/thead>\n \n\nGPIO 4<\/code><\/td>\nLED through 220 ohms<\/td>\n Any general-purpose pin<\/td>\n<\/tr>\n \nGPIO 34<\/code><\/td>\nA sensor, optional<\/td>\n ADC1, so it survives Wi-Fi<\/td>\n<\/tr>\n \nGND<\/code><\/td>\nGround<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nThe browser sends a path; the board replies with a page. Buttons are just links to different paths.<\/figcaption><\/figure>\nWiring steps<\/h2>\n\n- Unplug the USB cable.<\/li>\n
- LED through a 220 ohm resistor from
GPIO 4<\/code> to GND<\/code>, long leg to the resistor.<\/li>\n- Plug the USB cable back in.<\/li>\n<\/ol>\n
Software and libraries<\/h2>\n
Both libraries used here come with the ESP32 board package. Nothing to install.<\/p>\n
Minimal working example<\/h2>\n
The long way first, so the exchange is visible.<\/p>\n
\/\/ Siratek: a web server written out by hand, so you can see the request.\n\n#include <WiFi.h>\n\nconst char* ssid = \"your network name\";\nconst char* password = \"your password\";\n\nWiFiServer server(80);\n\nvoid setup() {\n Serial.begin(115200);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n\n unsigned long start = millis();\n while (WiFi.status() != WL_CONNECTED && millis() - start < 20000) {\n delay(500);\n }\n\n if (WiFi.status() != WL_CONNECTED) {\n Serial.println(\"Siratek: no Wi-Fi. See the previous tutorial.\");\n return;\n }\n\n server.begin();\n Serial.print(\"Siratek: open http:\/\/\");\n Serial.println(WiFi.localIP());\n}\n\nvoid loop() {\n WiFiClient client = server.accept();\n if (!client) {\n return;\n }\n\n \/\/ Read the first line, which holds the method and the path.\n String request = client.readStringUntil('\\r');\n Serial.print(\"request: \");\n Serial.println(request);\n client.readStringUntil('\\n');\n\n client.println(\"HTTP\/1.1 200 OK\");\n client.println(\"Content-Type: text\/html\");\n client.println(\"Connection: close\");\n client.println(); \/\/ the blank line matters\n client.println(\"<!DOCTYPE html><html><body>\");\n client.println(\"<h1>Siratek<\/h1><p>Hello from an ESP32.<\/p>\");\n client.println(\"<\/body><\/html>\");\n\n client.stop();\n}<\/code><\/pre>\naccept()<\/code>, not available()<\/code>.<\/strong> Older code and older tutorials write server.available()<\/code> here, and on ESP32 core 2.x that was the only name. Core 3 renamed it to accept()<\/code> and left the old name in place as deprecated, so available()<\/code> still works but the compiler now warns about it. If you are on core 2.x the line must read available()<\/code>; the Boards Manager tells you which version you have.<\/p>\nThe blank line is not optional.<\/strong> It separates the headers from the page, and without it the browser waits for headers that never end and eventually gives up. It is the most common mistake in hand-written servers.<\/p>\nWatch the serial monitor while you load the page. You will usually see two<\/strong> requests: one for the page and one for \/favicon.ico<\/code>, which the browser asks for automatically. That surprises people and is normal.<\/p>\nThe useful version<\/h3>\n\/\/ Siratek: a page showing a reading, with buttons that work.\n\n#include <WiFi.h>\n#include <WebServer.h>\n\nconst char* ssid = \"your network name\";\nconst char* password = \"your password\";\n\nWebServer server(80);\n\nconst int ledPin = 4;\nconst int sensorPin = 34; \/\/ ADC1, so Wi-Fi does not break it\n\nbool ledOn = false;\n\nString page() {\n int reading = analogRead(sensorPin);\n\n String html = \"<!DOCTYPE html><html><head>\";\n html += \"<meta name='viewport' content='width=device-width,initial-scale=1'>\";\n html += \"<title>Siratek<\/title>\";\n html += \"<style>body{font-family:system-ui;margin:2rem;line-height:1.6}\";\n html += \"a{display:inline-block;padding:.6rem 1.2rem;margin-right:.5rem;\";\n html += \"background:#0f766e;color:#fff;text-decoration:none;border-radius:6px}<\/style>\";\n html += \"<\/head><body>\";\n html += \"<h1>Siratek sensor node<\/h1>\";\n html += \"<p>Reading: <strong>\" + String(reading) + \"<\/strong> of 4095<\/p>\";\n html += \"<p>LED is <strong>\" + String(ledOn ? \"on\" : \"off\") + \"<\/strong><\/p>\";\n html += \"<p><a href='\/on'>Turn on<\/a><a href='\/off'>Turn off<\/a><\/p>\";\n html += \"<\/body><\/html>\";\n\n return html;\n}\n\nvoid handleRoot() {\n server.send(200, \"text\/html\", page());\n}\n\nvoid handleOn() {\n ledOn = true;\n digitalWrite(ledPin, HIGH);\n \/\/ Redirect back to the main page, so a refresh does not switch it again.\n server.sendHeader(\"Location\", \"\/\");\n server.send(303);\n}\n\nvoid handleOff() {\n ledOn = false;\n digitalWrite(ledPin, LOW);\n server.sendHeader(\"Location\", \"\/\");\n server.send(303);\n}\n\nvoid setup() {\n pinMode(ledPin, OUTPUT);\n Serial.begin(115200);\n\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n unsigned long start = millis();\n while (WiFi.status() != WL_CONNECTED && millis() - start < 20000) {\n delay(500);\n }\n if (WiFi.status() != WL_CONNECTED) {\n Serial.println(\"Siratek: no Wi-Fi.\");\n return;\n }\n\n server.on(\"\/\", handleRoot);\n server.on(\"\/on\", handleOn);\n server.on(\"\/off\", handleOff);\n server.onNotFound([]() {\n server.send(404, \"text\/plain\", \"Not found\");\n });\n\n server.begin();\n Serial.print(\"Siratek: open http:\/\/\");\n Serial.println(WiFi.localIP());\n}\n\nvoid loop() {\n server.handleClient(); \/\/ must be called often\n}<\/code><\/pre>\nFour decisions here are worth more than the rest of the code.<\/p>\n
The viewport meta tag.<\/strong> Without it a phone renders the page as if it were a desktop and everything is tiny. One line, and the page is usable on the device people will actually open it on.<\/p>\nThe redirect after switching.<\/strong> Without it, \/on<\/code> returns the page directly, the browser\u2019s address bar still says \/on<\/code>, and the next refresh switches it on again. With a user that is merely odd; with a relay it means a reload can re-trigger an action. Redirecting back to \/<\/code> means a refresh only ever reloads the page.<\/p>\nThe sensor is on an ADC1 pin.<\/strong> On ADC2 it would read nothing at all once Wi-Fi started, and the sketch would look broken for no visible reason.<\/p>\nserver.handleClient()<\/code> must be called often.<\/strong> Anything that blocks loop()<\/code> makes the page unresponsive. Use the millis()<\/code> pattern for periodic work, never delay()<\/code>.<\/p>\nWhy not just auto-refresh<\/h3>\n
The usual next step is a meta refresh tag that reloads the page every few seconds. It works, and it has two costs: the whole page is rebuilt and resent each time, and the page visibly flickers.<\/p>\n
The better shape is to serve the number separately and let the browser fetch just that:<\/p>\n
server.on(\"\/reading\", []() {\n server.send(200, \"text\/plain\", String(analogRead(sensorPin)));\n});<\/code><\/pre>\nThen a few lines of JavaScript in the page update one element:<\/p>\n
<script>\nsetInterval(async () => {\n const r = await fetch('\/reading');\n document.getElementById('v').textContent = await r.text();\n}, 2000);\n<\/script><\/code><\/pre>\nThe page loads once. Only the number moves. That is a reasonable amount of web knowledge to pick up for the improvement it gives.<\/p>\n
Expected result<\/h2>\n
An IP address on the serial monitor, and a page at that address from any device on the network, showing the reading and two working buttons.<\/p>\n
Open it on a phone. If the text is minute, the viewport tag is missing.<\/p>\n
Troubleshooting<\/h2>\n
\n\n\nSymptom<\/th>\n Likely cause<\/th>\n Check or fix<\/th>\n<\/tr>\n<\/thead>\n \n\nBrowser hangs, never loads<\/td>\n Missing blank line after the headers<\/td>\n client.println()<\/code> with no argument<\/td>\n<\/tr>\n\nPage loads once then stops<\/td>\n handleClient()<\/code> not called often<\/td>\nNothing in loop()<\/code> may block<\/td>\n<\/tr>\n\nReading always 0 or 4095<\/td>\n Sensor on an ADC2 pin<\/td>\n Use 32 to 39<\/td>\n<\/tr>\n \nRefresh switches the LED again<\/td>\n No redirect after the action<\/td>\n Send a 303 back to \/<\/code><\/td>\n<\/tr>\n\nTwo requests per page load<\/td>\n Browser asking for the favicon<\/td>\n Normal<\/td>\n<\/tr>\n \navailable()<\/code> is deprecated<\/td>\nCore 3 renamed it<\/td>\n Use accept()<\/code>; available()<\/code> on core 2.x<\/td>\n<\/tr>\n\nTiny text on a phone<\/td>\n No viewport meta tag<\/td>\n Add it<\/td>\n<\/tr>\n \nWorks on the laptop, not the phone<\/td>\n Phone on mobile data or another network<\/td>\n Same Wi-Fi<\/td>\n<\/tr>\n \nAddress stopped working<\/td>\n Router gave a new address<\/td>\n Reserve it, or use mDNS<\/td>\n<\/tr>\n \nBoard resets under load<\/td>\n Current during transmission<\/td>\n Better cable and port<\/td>\n<\/tr>\n \nPage slow to respond<\/td>\n delay()<\/code> in loop()<\/code><\/td>\nUse the millis()<\/code> pattern<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nNext steps<\/h2>\n\n- Easier first:<\/strong> ESP32, Your First Wi-Fi Project<\/em>.<\/li>\n
- Related:<\/strong> the relay tutorial, if the button should switch something real, and its safety section before you do.<\/li>\n
- Next project:<\/strong> a weather station page, serving a DHT22 reading to any phone in the house.<\/li>\n<\/ul>\n
Sources and attribution<\/h2>\n
All text, wiring guidance and code in this tutorial are original Siratek work.<\/p>\n
\n- Arduino-ESP32 documentation for the
WiFi<\/code>, WiFiServer<\/code> and WebServer<\/code> interfaces.<\/li>\n- HTTP\u2019s request line, status codes and header-body separation are defined by the HTTP specification; they are described here in the plainest terms that make the code make sense.<\/li>\n<\/ul>\n
The warning against exposing this server to the internet is a deliberate limitation of scope. No third-party tutorial text, diagrams, photographs or code has been reproduced here.<\/p>\n
<\/p>\n<\/body>","protected":false},"excerpt":{"rendered":"
The board becomes a small web server on your network. Type its address into a phone and you get a page showing a sensor reading, with buttons that switch something on and off.<\/p>\n","protected":false},"featured_media":0,"template":"","siratek_tutorial_level":[],"class_list":["post-52235","siratek_tutorial","type-siratek_tutorial","status-publish","hentry"],"yoast_head":"\n
Serving a Page from an ESP32 - siratek<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Serving a Page from an ESP32 - siratek\" \/>\n<meta property=\"og:description\" content=\"The board becomes a small web server on your network. Type its address into a phone and you get a page showing a sensor reading, with buttons that switch something on and off.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/\" \/>\n<meta property=\"og:site_name\" content=\"siratek\" \/>\n<meta property=\"og:image\" content=\"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/\",\"url\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/\",\"name\":\"Serving a Page from an ESP32 - siratek\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/siratek.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/siratek.net\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/esp32-web-server-wiring.svg\",\"datePublished\":\"2026-11-01T10:50:43+00:00\",\"breadcrumb\":{\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#primaryimage\",\"url\":\"https:\\\/\\\/siratek.net\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/esp32-web-server-wiring.svg\",\"contentUrl\":\"https:\\\/\\\/siratek.net\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/esp32-web-server-wiring.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/esp32-web-server\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/siratek.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/siratek.net\\\/index.php\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Serving a Page from an ESP32\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/siratek.net\\\/#website\",\"url\":\"https:\\\/\\\/siratek.net\\\/\",\"name\":\"siratek\",\"description\":\"Your Best Electronic Retail Shop\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/siratek.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Serving a Page from an ESP32 - siratek","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","og_locale":"en_US","og_type":"article","og_title":"Serving a Page from an ESP32 - siratek","og_description":"The board becomes a small web server on your network. Type its address into a phone and you get a page showing a sensor reading, with buttons that switch something on and off.","og_url":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","og_site_name":"siratek","og_image":[{"url":"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","url":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/","name":"Serving a Page from an ESP32 - siratek","isPartOf":{"@id":"https:\/\/siratek.net\/#website"},"primaryImageOfPage":{"@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#primaryimage"},"image":{"@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#primaryimage"},"thumbnailUrl":"http:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg","datePublished":"2026-11-01T10:50:43+00:00","breadcrumb":{"@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#primaryimage","url":"https:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg","contentUrl":"https:\/\/siratek.net\/wp-content\/uploads\/2026\/11\/esp32-web-server-wiring.svg"},{"@type":"BreadcrumbList","@id":"http:\/\/siratek.net\/index.php\/tutorials\/esp32-web-server\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siratek.net\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/siratek.net\/index.php\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Serving a Page from an ESP32"}]},{"@type":"WebSite","@id":"https:\/\/siratek.net\/#website","url":"https:\/\/siratek.net\/","name":"siratek","description":"Your Best Electronic Retail Shop","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siratek.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial\/52235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial"}],"about":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/types\/siratek_tutorial"}],"version-history":[{"count":0,"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial\/52235\/revisions"}],"wp:attachment":[{"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/media?parent=52235"}],"wp:term":[{"taxonomy":"siratek_tutorial_level","embeddable":true,"href":"https:\/\/siratek.net\/index.php\/wp-json\/wp\/v2\/siratek_tutorial_level?post=52235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}