{"id":36542,"date":"2018-07-16T11:50:37","date_gmt":"2018-07-16T11:50:37","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=36542"},"modified":"2025-05-09T09:48:28","modified_gmt":"2025-05-09T09:48:28","slug":"esp32-web-server-arduino-ide","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/","title":{"rendered":"ESP32 Web Server &#8211; Arduino IDE"},"content":{"rendered":"\n<p>In this project you\u2019ll create a standalone web server with an ESP32 that controls outputs (two LEDs) using the Arduino IDE programming environment.&nbsp;The web server is mobile responsive and can be accessed with any device that as a browser on the local network. We&#8217;ll show you how to create the web server and how the code works step-by-step.<\/p>\n\n\n\n<!--more-->\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-we-server.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67747\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-we-server.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-we-server.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-we-server.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-we-server.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclgreen\">We recommend following our latest updated guide instead: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-beginners-guide\/\">Building an ESP32 Web Server: The Complete Guide for Beginners<\/a>. <\/p>\n\n\n\n<p>If you want to learn more about the ESP32, read <a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-esp32\/\">Getting Started Guide with ESP32<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video Tutorial<\/h2>\n\n\n\n<p><em>This tutorial is available in video format (watch below) and in written format (continue reading this page).&nbsp;<\/em><\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/ApGwxX6VVzk?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n\n<p>Before going straight to the project, it is important to outline what our web server will do, so that it is easier to follow the steps later on.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The web server you\u2019ll build controls two LEDs connected to the ESP32 <span class=\"rnthl rntclgreen\">GPIO 26<\/span> and <span class=\"rnthl rntclblue\">GPIO 27<\/span>;<\/li>\n\n\n\n<li>You can access the ESP32 web server by typing the ESP32 IP address on a browser in the local network;<\/li>\n\n\n\n<li>By clicking the buttons on your web server you can instantly change the state of each LED.<\/li>\n<\/ul>\n\n\n\n<p>This is just a simple example to illustrate how to build a web server that controls outputs, the idea is to replace those LEDs with a&nbsp;<a href=\"https:\/\/makeradvisor.com\/tools\/5v-2-channel-relay-module-optocoupler\/\" target=\"_blank\" rel=\"noopener noreferrer\">relay<\/a>, or any other electronic components you want.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installing the ESP32 board in Arduino IDE<\/h2>\n\n\n\n<p>There\u2019s an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow one of the following tutorials to prepare your Arduino IDE:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-the-esp32-board-in-arduino-ide-windows-instructions\/\"><strong>Windows instructions<\/strong> &#8211; Installing the ESP32 Board in Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-the-esp32-board-in-arduino-ide-mac-and-linux-instructions\/\"><strong>Mac and Linux instructions<\/strong> &#8211;\u00a0Installing the ESP32 Board in Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n\n<p>For this tutorial you&#8217;ll need the following parts:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"500\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-arduino-ide-parts-required.jpg?resize=750%2C500&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67768\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-arduino-ide-parts-required.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-arduino-ide-parts-required.jpg?resize=300%2C200&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 development board<\/a>\u00a0&#8211;\u00a0\u00a0<a href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noopener noreferrer\">read ESP32 Development Boards Review and Comparison<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 5mm LED<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 330 Ohm resistor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">Breadboard<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematic<\/h2>\n\n\n\n<p>Start by building the circuit. Connect two LEDs to the ESP32 as shown in the following schematic diagram \u2013 one LED connected to <span class=\"rnthl rntclgreen\">GPIO 26<\/span>, and the other to <span class=\"rnthl rntclblue\">GPIO 27.<\/span><\/p>\n\n\n\n<p><strong>Note<\/strong>: We&#8217;re using the ESP32 DEVKIT DOIT board with 36 pins. Before assembling the circuit, make sure you check the pinout for the board you&#8217;re using.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"984\" height=\"700\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32_web_server_schematic.png?resize=984%2C700&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67732\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32_web_server_schematic.png?w=984&amp;quality=100&amp;strip=all&amp;ssl=1 984w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32_web_server_schematic.png?resize=300%2C213&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32_web_server_schematic.png?resize=768%2C546&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 984px) 100vw, 984px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ESP32 Web Server Code<\/h2>\n\n\n\n<p>Here we provide the code that creates the ESP32 web server. Copy the following code to your Arduino IDE, but don&#8217;t upload it yet.&nbsp;You need to make some changes to make it work for you.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Load Wi-Fi library\n#include &lt;WiFi.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Variable to store the HTTP request\nString header;\n\n\/\/ Auxiliar variables to store the current output state\nString output26State = &quot;off&quot;;\nString output27State = &quot;off&quot;;\n\n\/\/ Assign output variables to GPIO pins\nconst int output26 = 26;\nconst int output27 = 27;\n\n\/\/ Current time\nunsigned long currentTime = millis();\n\/\/ Previous time\nunsigned long previousTime = 0; \n\/\/ Define timeout time in milliseconds (example: 2000ms = 2s)\nconst long timeoutTime = 2000;\n\nvoid setup() {\n  Serial.begin(115200);\n  \/\/ Initialize the output variables as outputs\n  pinMode(output26, OUTPUT);\n  pinMode(output27, OUTPUT);\n  \/\/ Set outputs to LOW\n  digitalWrite(output26, LOW);\n  digitalWrite(output27, LOW);\n\n  \/\/ Connect to Wi-Fi network with SSID and password\n  Serial.print(&quot;Connecting to &quot;);\n  Serial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n  \/\/ Print local IP address and start web server\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected.&quot;);\n  Serial.println(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    currentTime = millis();\n    previousTime = currentTime;\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    while (client.connected() &amp;&amp; currentTime - previousTime &lt;= timeoutTime) {  \/\/ loop while the client's connected\n      currentTime = millis();\n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n            \n            \/\/ turns the GPIOs on and off\n            if (header.indexOf(&quot;GET \/26\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 26 on&quot;);\n              output26State = &quot;on&quot;;\n              digitalWrite(output26, HIGH);\n            } else if (header.indexOf(&quot;GET \/26\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 26 off&quot;);\n              output26State = &quot;off&quot;;\n              digitalWrite(output26, LOW);\n            } else if (header.indexOf(&quot;GET \/27\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 27 on&quot;);\n              output27State = &quot;on&quot;;\n              digitalWrite(output27, HIGH);\n            } else if (header.indexOf(&quot;GET \/27\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 27 off&quot;);\n              output27State = &quot;off&quot;;\n              digitalWrite(output27, LOW);\n            }\n            \n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            \/\/ CSS to style the on\/off buttons \n            \/\/ Feel free to change the background-color and font-size attributes to fit your preferences\n            client.println(&quot;&lt;style&gt;html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}&quot;);\n            client.println(&quot;.button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;&quot;);\n            client.println(&quot;text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}&quot;);\n            client.println(&quot;.button2 {background-color: #555555;}&lt;\/style&gt;&lt;\/head&gt;&quot;);\n            \n            \/\/ Web Page Heading\n            client.println(&quot;&lt;body&gt;&lt;h1&gt;ESP32 Web Server&lt;\/h1&gt;&quot;);\n            \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 26  \n            client.println(&quot;&lt;p&gt;GPIO 26 - State &quot; + output26State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output26State is off, it displays the ON button       \n            if (output26State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/26\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/26\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } \n               \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 27  \n            client.println(&quot;&lt;p&gt;GPIO 27 - State &quot; + output27State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output27State is off, it displays the ON button       \n            if (output27State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/27\/on\\&quot;&gt;&lt;button class=\\&quot;button\\&quot;&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            } else {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/27\/off\\&quot;&gt;&lt;button class=\\&quot;button button2\\&quot;&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;);\n            }\n            client.println(&quot;&lt;\/body&gt;&lt;\/html&gt;&quot;);\n            \n            \/\/ The HTTP response ends with another blank line\n            client.println();\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Course\/raw\/master\/code\/WiFi_Web_Server_Outputs\/WiFi_Web_Server_Outputs.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting Your Network Credentials<\/h3>\n\n\n\n<p>You need to modify the following&nbsp;lines with your network credentials: SSID and password. The code is well commented on where you should make the changes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Replace with your network credentials\nconst char* ssid &nbsp;&nbsp;&nbsp;&nbsp;= \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Uploading the Code<\/h3>\n\n\n\n<p>Now, you can upload the code and and the web server will work straight away. Follow the next steps to upload code to the ESP32:<\/p>\n\n\n\n<p><strong>1)<\/strong> Plug your ESP32 board in your computer;<\/p>\n\n\n\n<p><strong>2)<\/strong>&nbsp;In the Arduino IDE select your board in <strong>Tools<\/strong> &gt; <strong>Board<\/strong>&nbsp;(in our case we&#8217;re using the ESP32 DEVKIT DOIT board);<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"614\" height=\"520\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/windows-select-board.png?resize=614%2C520&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67737\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/windows-select-board.png?w=614&amp;quality=100&amp;strip=all&amp;ssl=1 614w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/windows-select-board.png?resize=300%2C254&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 614px) 100vw, 614px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>3) Select the COM port in&nbsp;<strong>Tools<\/strong> &gt;&nbsp;<strong>Port<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"386\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/windows-select-com-port.png?resize=490%2C386&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67738\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/windows-select-com-port.png?w=490&amp;quality=100&amp;strip=all&amp;ssl=1 490w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/windows-select-com-port.png?resize=300%2C236&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>4) Press the <strong>Upload<\/strong> button in the Arduino IDE and wait a few seconds while the code compiles and uploads to your board.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"34\" height=\"29\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/12\/arduino-ide-upload-button.png?resize=34%2C29&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-65439\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>5) Wait for the &#8220;<strong>Done uploading<\/strong>&#8221; message.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"388\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/12\/windows-arduino-ide-done-uploading.png?resize=671%2C388&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-65448\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/12\/windows-arduino-ide-done-uploading.png?w=671&amp;quality=100&amp;strip=all&amp;ssl=1 671w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/12\/windows-arduino-ide-done-uploading.png?resize=300%2C173&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Finding the ESP IP Address<\/h3>\n\n\n\n<p>After uploading the code, open the Serial Monitor at a baud rate of 115200.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"109\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/serial-monitor.png?resize=745%2C109&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-61341\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/serial-monitor.png?w=745&amp;quality=100&amp;strip=all&amp;ssl=1 745w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/05\/serial-monitor.png?resize=300%2C44&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 745px) 100vw, 745px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Press the ESP32 EN button (reset).&nbsp;The ESP32 connects to Wi-Fi, and outputs the ESP IP address on the Serial Monitor. Copy that IP address, because you need it to access the ESP32 web server.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"222\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/ESP-IP-address-1.png?resize=739%2C222&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67739\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/ESP-IP-address-1.png?w=739&amp;quality=100&amp;strip=all&amp;ssl=1 739w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/ESP-IP-address-1.png?resize=300%2C90&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 739px) 100vw, 739px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing the Web Server<\/h2>\n\n\n\n<p>To access the web server, open your browser, paste the ESP32 IP address, and you\u2019ll see the following page. In our case it is <strong>192.168.1.135<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"623\" height=\"435\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-outputs.png?resize=623%2C435&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67740\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-outputs.png?w=623&amp;quality=100&amp;strip=all&amp;ssl=1 623w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-outputs.png?resize=300%2C209&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>If you take a look at the Serial Monitor, you can see what\u2019s happening on the background. The ESP receives an HTTP request from a new client (in this case, your browser).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"308\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/new-client.png?resize=740%2C308&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67741\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/new-client.png?w=740&amp;quality=100&amp;strip=all&amp;ssl=1 740w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/new-client.png?resize=300%2C125&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can also see other information about the HTTP request.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing the Web Server<\/h2>\n\n\n\n<p>Now you can test if your web server is working properly. Click the buttons to control the LEDs.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-control-outputs.png?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67749\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-control-outputs.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-web-server-control-outputs.png?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>At the same time, you can take a look at the Serial Monitor to see what&#8217;s going on in the background. For example, when you click the button to turn <span class=\"rnthl rntclgreen\">GPIO 26<\/span> ON, ESP32 receives a request on the <strong>\/26\/on<\/strong> URL.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"756\" height=\"372\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/serial-monitor-fpio-16-on.png?resize=756%2C372&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67750\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/serial-monitor-fpio-16-on.png?w=756&amp;quality=100&amp;strip=all&amp;ssl=1 756w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/serial-monitor-fpio-16-on.png?resize=300%2C148&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 756px) 100vw, 756px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>When the ESP32 receives that request, it turns the LED attached to <span class=\"rnthl rntclgreen\">GPIO 26<\/span> ON and updates its state on the web page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"623\" height=\"435\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/gpio-26-on-web-server.png?resize=623%2C435&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-67742\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/gpio-26-on-web-server.png?w=623&amp;quality=100&amp;strip=all&amp;ssl=1 623w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/gpio-26-on-web-server.png?resize=300%2C209&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>The button for <span class=\"rnthl rntclblue\">GPIO 27<\/span> works in a similar way. Test that it is working properly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>In this section will take a closer look at the code to see how it works.<\/p>\n\n\n\n<p>The first thing you need to do is to include the WiFi library.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#include &lt;WiFi.h&gt;<\/code><\/pre>\n\n\n\n<p>As mentioned previously, you need to insert your ssid and password in the following lines inside the double quotes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const char* ssid = \"\";\nconst char* password = \"\";<\/code><\/pre>\n\n\n\n<p>Then, you set your web server to port 80.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>WiFiServer server(80);<\/code><\/pre>\n\n\n\n<p>The following line creates a variable to store the header of the HTTP request:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String header;<\/code><\/pre>\n\n\n\n<p>Next, you create auxiliar variables to store the current state of your outputs. If you want to add more outputs and save its state, you need to create more variables.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String output26State = \"off\";\nString output27State = \"off\";<\/code><\/pre>\n\n\n\n<p>You also need to assign a GPIO to each of your outputs. Here we are using <span class=\"rnthl rntclgreen\">GPIO 26<\/span> and <span class=\"rnthl rntclblue\">GPIO 27<\/span>. You can use any other suitable GPIOs.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const int output26 = 26;\nconst int output27 = 27;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>Now, let\u2019s go into the <span class=\"rnthl rntliteral\">setup()<\/span>.&nbsp;First, we start a serial communication at a baud rate of 115200 for debugging purposes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Serial.begin(115200);<\/code><\/pre>\n\n\n\n<p>You also define your GPIOs as OUTPUTs and set them to LOW.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Initialize the output variables as outputs\npinMode(output26, OUTPUT);\npinMode(output27, OUTPUT);\n\n\/\/ Set outputs to LOW\ndigitalWrite(output26, LOW);\ndigitalWrite(output27, LOW);<\/code><\/pre>\n\n\n\n<p>The following lines begin the Wi-Fi connection with <span class=\"rnthl rntliteral\">WiFi.begin(ssid, password)<\/span>, wait for a successful connection and print the ESP IP address in the Serial Monitor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Connect to Wi-Fi network with SSID and password\nSerial.print(\"Connecting to \");\nSerial.println(ssid);\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n  delay(500);\n  Serial.print(\".\");\n}\n\/\/ Print local IP address and start web server\nSerial.println(\"\");\nSerial.println(\"WiFi connected.\");\nSerial.println(\"IP address: \");\nSerial.println(WiFi.localIP());\nserver.begin();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">loop()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">loop()<\/span> we program what happens when a new client establishes a connection with the web server.<\/p>\n\n\n\n<p>The ESP32 is always listening for incoming clients with the following line:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>WiFiClient client = server.available(); \/\/ Listen for incoming clients<\/code><\/pre>\n\n\n\n<p>When a request is received from a client, we\u2019ll save the incoming data. The while loop that follows will be running as long as the client stays connected. We don\u2019t recommend changing the following part of the code unless you know exactly what you are doing.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (client) { \/\/ If a new client connects,\n  Serial.println(\"New Client.\"); \/\/ print a message out in the serial port\n  String currentLine = \"\"; \/\/ make a String to hold incoming data from the client\n  while (client.connected()) { \/\/ loop while the client's connected\n    if (client.available()) { \/\/ if there's bytes to read from the client,\n      char c = client.read(); \/\/ read a byte, then\n      Serial.write(c); \/\/ print it out the serial monitor\n      header += c;\n      if (c == '\\n') { \/\/ if the byte is a newline character\n      \/\/ if the current line is blank, you got two newline characters in a row.\n      \/ that's the end of the client HTTP request, so send a response:\n        if (currentLine.length() == 0) {\n        \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n        \/\/ and a content-type so the client knows what's coming, then a blank line:\n          client.println(\"HTTP\/1.1 200 OK\");\n          client.println(\"Content-type:text\/html\");\n          client.println(\"Connection: close\");\n          client.println();<\/code><\/pre>\n\n\n\n<p>The next section of if and else statements checks which button was pressed in your web page, and controls the outputs accordingly. As we\u2019ve seen previously, we make a request on different URLs depending on the button pressed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ turns the GPIOs on and off\nif (header.indexOf(\"GET \/26\/on\") &gt;= 0) {\n&nbsp; Serial.println(\"GPIO 26 on\");\n&nbsp; output26State = \"on\";\n  digitalWrite(output26, HIGH);\n} else if (header.indexOf(\"GET \/26\/off\") &gt;= 0) {\n  Serial.println(\"GPIO 26 off\");\n  output26State = \"off\";\n  digitalWrite(output26, LOW);\n} else if (header.indexOf(\"GET \/27\/on\") &gt;= 0) {\n  Serial.println(\"GPIO 27 on\");\n  output27State = \"on\";\n  digitalWrite(output27, HIGH);\n} else if (header.indexOf(\"GET \/27\/off\") &gt;= 0) {\n  Serial.println(\"GPIO 27 off\");\n  output27State = \"off\";\n  digitalWrite(output27, LOW);\n}<\/code><\/pre>\n\n\n\n<p>For example, if you\u2019ve press the GPIO 26 ON button, the ESP32 receives a request on the <strong>\/26\/ON URL<\/strong> (we can see that&nbsp;that information on the HTTP header on the Serial Monitor). So, we can check if the header contains the expression<strong> GET \/26\/on<\/strong>. If it contains, we change the <span class=\"rnthl rntliteral\">output26state<\/span> variable to ON, and the ESP32 turns the LED on.<\/p>\n\n\n\n<p>This works similarly for the other buttons. So, if you want to add more outputs, you should modify this part of the code to include them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Displaying the HTML web page<\/h3>\n\n\n\n<p>The next thing you need to do, is creating the web page. The ESP32 will be sending a response to your browser with some HTML code to build the web page.<\/p>\n\n\n\n<p>The web page is sent to the client using this expressing <span class=\"rnthl rntliteral\">client.println()<\/span>. You should enter what you want to send to the client as an argument.<\/p>\n\n\n\n<p>The first thing we should send is always the following line, that indicates that we are sending HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE HTML&gt;&lt;html&gt;<\/code><\/pre>\n\n\n\n<p>Then, the following line makes the web page responsive in any web browser.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>client.println(\"&lt;head&gt;&lt;meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"&gt;\");<\/code><\/pre>\n\n\n\n<p>And the following is used to prevent requests on the favicon. \u2013 You don\u2019t need to worry about this line.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>client.println(\"&lt;link rel=\\\"icon\\\" href=\\\"data:,\\\"&gt;\");<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styling the Web Page<\/h3>\n\n\n\n<p>Next, we have some CSS text to style the buttons and the web page appearance. We choose the Helvetica font, define the content to be displayed as a block and aligned at the center.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>client.println(\"&lt;style&gt;html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\");<\/code><\/pre>\n\n\n\n<p>We style our buttons with the #4CAF50 color, without border, text in white color, and with this padding: 16px 40px. We also set the text-decoration to none, define the font size, the margin, and the cursor to a pointer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>client.println(\".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;\");\nclient.println(\"text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}\");<\/code><\/pre>\n\n\n\n<p>We also define the style for a second button, with all the properties of the button we\u2019ve defined earlier, but with a different color. This will be the style for the off button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>client.println(\".button2 {background-color: #555555;}&lt;\/style&gt;&lt;\/head&gt;\");<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Setting the Web Page First Heading<\/h3>\n\n\n\n<p>In the next line you can set the first heading of your web page. Here we have \u201c<strong>ESP32 Web Server<\/strong>\u201d, but you can change this text to whatever you like.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Web Page Heading\nclient.println(\"&lt;h1&gt;ESP32 Web Server&lt;\/h1&gt;\");<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Displaying the Buttons and Corresponding State<\/h3>\n\n\n\n<p>Then, you write a paragraph to display the <span class=\"rnthl rntclgreen\">GPIO 26<\/span> current state. As you can see we use the <span class=\"rnthl rntliteral\">output26State<\/span> variable, so that the state updates instantly when this variable changes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>client.println(\"&lt;p&gt;GPIO 26 - State \" + output26State + \"&lt;\/p&gt;\");<\/code><\/pre>\n\n\n\n<p>Then, we display the on or the off button, depending on the current state of the GPIO. If the current state of the GPIO is off, we show the ON button, if not, we display the OFF button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (output26State==\"off\") {\n  client.println(\"&lt;p&gt;&lt;a href=\\\"\/26\/on\\\"&gt;&lt;button class=\\\"button\\\"&gt;ON&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;\");\n} else {\n  client.println(\"&lt;p&gt;&lt;a href=\\\"\/26\/off\\\"&gt;&lt;button class=\\\"button button2\\\"&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;\");\n}<\/code><\/pre>\n\n\n\n<p>We use the same procedure for <span class=\"rnthl rntclblue\">GPIO 27<\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Closing the Connection<\/h3>\n\n\n\n<p>Finally, when the response ends, we clear the <span class=\"rnthl rntliteral\">header<\/span> variable, and stop the connection with the client with <span class=\"rnthl rntliteral\">client.stop()<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Clear the header variable\nheader = \"\";\n\/\/ Close the connection\nclient.stop();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial we&#8217;ve shown you how to build a web server with the ESP32. We&#8217;ve shown you a simple example that controls two LEDs, but the idea is to replace those LEDs with a relay, or any other output you want to control. For more projects with ESP32, check the following tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-an-all-in-one-esp32-weather-station-shield\/\">Build an All-in-One ESP32 Weather Station Shield<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-servo-motor-web-server-arduino-ide\/\">ESP32 Servo Motor Web Server<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-bluetooth-low-energy-ble-arduino-ide\/\">Getting Started with ESP32 Bluetooth Low Energy (BLE)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/category\/esp32\/\">More ESP32 tutorials<\/a><\/li>\n<\/ul>\n\n\n\n<p><em>This is an excerpt from our course:&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a>. If you like ESP32 and you want to learn more, we recommend enrolling in&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE course<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project you\u2019ll create a standalone web server with an ESP32 that controls outputs (two LEDs) using the Arduino IDE programming environment.\u00a0The web server is mobile responsive and can be accessed with any device that as a browser on the local network. <\/p>\n<p class=\"read-more-container\"><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\" class=\"read-more button\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":67747,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,245,276,281,277,299,265,264,257],"tags":[],"class_list":["post-36542","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino","category-arduino-ide","category-esp32","category-esp32-project","category-esp32-arduino-ide","category-0-esp32","category-esp8266-project","category-project","category-web-server-2"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/07\/esp32-we-server.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/36542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=36542"}],"version-history":[{"count":2,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/36542\/revisions"}],"predecessor-version":[{"id":169962,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/36542\/revisions\/169962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/67747"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=36542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=36542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=36542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}