{"id":5119,"date":"2019-08-06T11:03:33","date_gmt":"2019-08-06T11:03:33","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=5119"},"modified":"2019-08-06T11:50:50","modified_gmt":"2019-08-06T11:50:50","slug":"esp8266-web-server","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/","title":{"rendered":"Build an ESP8266 Web Server &#8211; Code and Schematics (NodeMCU)"},"content":{"rendered":"\n<p>This tutorial is a step-by-step guide that shows how to build a standalone ESP8266 Web Server that controls two outputs (two LEDs). This ESP8266 NodeMCU Web Server is mobile responsive and it can be accessed with any device with a browser in your local network.<\/p>\n\n\n\n<div class=\"wp-block-image\"><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\/2015\/02\/esp8266-web-server-thumbnail.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Build an ESP8266 Web Server - Code and Schematics (NodeMCU)\" class=\"wp-image-52739\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-web-server-thumbnail.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-web-server-thumbnail.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-web-server-thumbnail.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-web-server-thumbnail.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\n<p>If you want to learn more about the ESP8266 module, first read my <a href=\"https:\/\/randomnerdtutorials.com\/esp8266\">Getting Started Guide for the ESP8266 WiFi Module<\/a>.&nbsp;<\/p>\n\n\n\n<p>This tutorial covers two different methods to build the web server:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Part 1<\/strong>: Create a Web Server Using Arduino IDE<\/li><li><strong>Part 2<\/strong>: Create a Web Server Using NodeMCU Firmware<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">PART 1: CREATE A WEB SERVER USING ARDUINO IDE<\/h2>\n\n\n\n<p>This part shows you how to create a web server to control two outputs using Arduino IDE. You can use this method to create a different web server to fulfill your needs.<\/p>\n\n\n\n<p><em>This tutorial is available in video format (watch below) and in written format (continue reading this page).<\/em><\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/dWM4p_KaTHY?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prepare the Arduino IDE<\/h2>\n\n\n\n<p><strong>1.<\/strong> Download and <a href=\"https:\/\/www.arduino.cc\/en\/Main\/Software\" target=\"_blank\" rel=\"noreferrer noopener\">install the Arduino IDE<\/a> on your operating system (some older versions won\u2019t work).<\/p>\n\n\n\n<p><strong>2.&nbsp;<\/strong>Then, you need to install the ESP8266 add-on for the Arduino IDE.&nbsp;For that, go to <strong>File<\/strong> &gt; <strong>Preferences<\/strong>.<\/p>\n\n\n\n<p><strong>3.<\/strong>&nbsp;Enter <span class=\"rnthl rntliteral\">http:\/\/arduino.esp8266.com\/stable\/package_esp8266com_index.json<\/span> into the &#8220;<strong>Additional Board Manager URLs<\/strong>&#8221; field as shown in the figure below. Then, click the \u201c<strong>OK<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"722\" height=\"607\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-arduino-ide-preferences.png?resize=722%2C607&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install ESP8266 Boards Arduino IDE Additional Boards Manager URLs\" class=\"wp-image-52672\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-arduino-ide-preferences.png?w=722&amp;quality=100&amp;strip=all&amp;ssl=1 722w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-arduino-ide-preferences.png?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/figure><\/div>\n\n\n\n<p><strong>4.<\/strong>&nbsp;Go to <strong>Tools<\/strong> &gt; <strong>Board<\/strong> &gt; <strong>Boards Manager<\/strong>&#8230;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"605\" height=\"263\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/Arduino-IDE-boards-manager.png?resize=605%2C263&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install ESP8266 Boards Arduino IDE Boards Manager\" class=\"wp-image-12151\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/Arduino-IDE-boards-manager.png?w=605&amp;quality=100&amp;strip=all&amp;ssl=1 605w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/Arduino-IDE-boards-manager.png?resize=300%2C130&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 605px) 100vw, 605px\" \/><\/figure><\/div>\n\n\n\n<p><strong>5.<\/strong>\u00a0Scroll down, select the ESP8266 board menu and install \u201ce<strong>sp8266 by ESP8266 Community<\/strong>\u201d, as shown in the figure below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"474\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/installing-esp-board.png?resize=865%2C474&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Install ESP8266 Boards Arduino IDE\" class=\"wp-image-12149\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/installing-esp-board.png?w=865&amp;quality=100&amp;strip=all&amp;ssl=1 865w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/09\/installing-esp-board.png?resize=300%2C164&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 865px) 100vw, 865px\" \/><\/figure><\/div>\n\n\n\n<p><strong>6.<\/strong> Go to <strong>Tools<\/strong> &gt;&nbsp;<strong>Board<\/strong> and&nbsp;choose your ESP8266 board. Then, re-open your Arduino IDE.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>Copy the following code to your Arduino IDE, but don&#8217;t upload it yet. 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;ESP8266WiFi.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 output5State = &quot;off&quot;;\nString output4State = &quot;off&quot;;\n\n\/\/ Assign output variables to GPIO pins\nconst int output5 = 5;\nconst int output4 = 4;\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(output5, OUTPUT);\n  pinMode(output4, OUTPUT);\n  \/\/ Set outputs to LOW\n  digitalWrite(output5, LOW);\n  digitalWrite(output4, 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    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    currentTime = millis();\n    previousTime = currentTime;\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 \/5\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 5 on&quot;);\n              output5State = &quot;on&quot;;\n              digitalWrite(output5, HIGH);\n            } else if (header.indexOf(&quot;GET \/5\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 5 off&quot;);\n              output5State = &quot;off&quot;;\n              digitalWrite(output5, LOW);\n            } else if (header.indexOf(&quot;GET \/4\/on&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 4 on&quot;);\n              output4State = &quot;on&quot;;\n              digitalWrite(output4, HIGH);\n            } else if (header.indexOf(&quot;GET \/4\/off&quot;) &gt;= 0) {\n              Serial.println(&quot;GPIO 4 off&quot;);\n              output4State = &quot;off&quot;;\n              digitalWrite(output4, 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: #195B6A; 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: #77878A;}&lt;\/style&gt;&lt;\/head&gt;&quot;);\n            \n            \/\/ Web Page Heading\n            client.println(&quot;&lt;body&gt;&lt;h1&gt;ESP8266 Web Server&lt;\/h1&gt;&quot;);\n            \n            \/\/ Display current state, and ON\/OFF buttons for GPIO 5  \n            client.println(&quot;&lt;p&gt;GPIO 5 - State &quot; + output5State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output5State is off, it displays the ON button       \n            if (output5State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/5\/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;\/5\/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 4  \n            client.println(&quot;&lt;p&gt;GPIO 4 - State &quot; + output4State + &quot;&lt;\/p&gt;&quot;);\n            \/\/ If the output4State is off, it displays the ON button       \n            if (output4State==&quot;off&quot;) {\n              client.println(&quot;&lt;p&gt;&lt;a href=\\&quot;\/4\/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;\/4\/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\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP8266_Web_Server_Arduino_IDE_updated.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>You need to modify the following two variables with your network credentials, so that your ESP8266 can establish a connection with your router.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid = \"\";\nconst char* password = \"\";<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Uploading the Sketch<\/h2>\n\n\n\n<p><strong>Uploading the Sketch to the ESP-12E<\/strong><\/p>\n\n\n\n<p>If you&#8217;re using an ESP-12E NodeMCU Kit, uploading the sketch is very simple, since it has built-in programmer. Plug your board to your computer. Make sure you have the right board and COM port selected.<\/p>\n\n\n\n<p>Then, click the Upload button in the Arduino IDE and wait a few seconds until you see the message \u201cDone uploading.\u201d in the bottom left corner.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"623\" height=\"425\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/done-uploading.png?resize=623%2C425&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Upload Web Server Code Sketch Arduino IDE ESP8266 NodeMCU \" class=\"wp-image-52678\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/done-uploading.png?w=623&amp;quality=100&amp;strip=all&amp;ssl=1 623w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/done-uploading.png?resize=300%2C205&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Uploading Sketch to the ESP-01<\/strong><\/p>\n\n\n\n<p>Uploading code to the ESP-01 requires establishing a serial communication between your ESP8266 and a FTDI Programmer as shown in the schematic diagram below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"759\" height=\"216\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP8266-Flasher-e1544623897676.png?resize=759%2C216&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 ESP-01 FTDI Programmer Flashing Firmware Circuit\" class=\"wp-image-5131\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP8266-Flasher-e1544623897676.png?w=759&amp;quality=100&amp;strip=all&amp;ssl=1 759w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP8266-Flasher-e1544623897676.png?resize=300%2C85&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/figure><\/div>\n\n\n\n<p class=\"rntbox rntclblue\"><strong>Note: <\/strong> alternatively, you can use a <a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-01-serial-adapter\/\">ESP8266-01 Serial Adapter<\/a>, which is easier to use and less error-prone.<\/p>\n\n\n\n<p>The following table shows the connections you need to make between the ESP8266 and the FTDI programmer.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td><strong>ESP8266<\/strong><\/td><td><strong>FTDI programmer<\/strong><\/td><\/tr><tr><td>RX<\/td><td>TX<\/td><\/tr><tr><td>TX <\/td><td>RX<\/td><\/tr><tr><td>CH_PD<\/td><td>3.3V<\/td><\/tr><tr><td>GPIO 0<\/td><td>GND<\/td><\/tr><tr><td>VCC<\/td><td>3.3V<\/td><\/tr><tr><td>GND <\/td><td>GND<\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>If you have a brand new FTDI Programmer, you&#8217;ll probably need to install the FTDI drivers on your Windows PC. Visit <a href=\"http:\/\/www.ftdichip.com\/Drivers\/VCP.htm\">this website for the official drivers<\/a>.&nbsp;(If the COM port is grayed out in your Arduino IDE, it is probably because you don&#8217;t have the drivers installed).<\/p>\n\n\n\n<p>Then, you just need to connect the FTDI programmer to your computer, and upload the code to the ESP8266.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematics<\/h2>\n\n\n\n<p>To build the circuit for this tutorial you need the following parts:<\/p>\n\n\n\n<p><strong>Parts required:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP8266 12-E<\/a>&nbsp;\u2013 read&nbsp;<a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP8266 Wi-Fi Development Boards<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">2x LEDs<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noreferrer noopener\">2x Resistors<\/a>&nbsp;(220 or 330 ohms should work just fine)<\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noreferrer noopener\">Breadboard<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jumper wires<\/a><\/li><\/ul>\n\n\n\n<p>If you&#8217;re using <a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/esp-01-wi-fi-board\/\" target=\"_blank\">ESP-01<\/a>, you also need an <a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/ftdi-programmer-board\/\" target=\"_blank\">FTDI programmer<\/a> or a <a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-01-serial-adapter\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Serial Adapter<\/a>.<\/p>\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<p>Connect two LEDs to your ESP8266 as shown in the following schematic diagram \u2013 with one LED connected to <span class=\"rnthl rntclblue\">GPIO 4<\/span> (D2), and another to <span class=\"rnthl rntclblue\">GPIO 5<\/span> (D1).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"555\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=928%2C555&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Schematic Control LEDs Web Server\" class=\"wp-image-52689\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?w=928&amp;quality=100&amp;strip=all&amp;ssl=1 928w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=300%2C179&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-schematics_bb.png?resize=768%2C459&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/figure><\/div>\n\n\n\n<p><strong>If you are using ESP-01&#8230;<\/strong><\/p>\n\n\n\n<p>If you&#8217;re using the ESP8266-01, use the following schematic diagram as a reference, but you need change the GPIOs assignment in the code (to <span class=\"rnthl rntcyellow\">GPIO 2<\/span> and <span class=\"rnthl rntcpurple\">GPIO 0<\/span>).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"754\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?resize=691%2C754&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP-01 Schematic Control LEDs Web Server\" class=\"wp-image-5132\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?w=691&amp;quality=100&amp;strip=all&amp;ssl=1 691w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?resize=275%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 275w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Testing the Web Server<\/h2>\n\n\n\n<p>Now, you can upload the code, and it will work straight away. Don\u2019t forget to check if you have the right board and COM port selected, otherwise you\u2019ll get an error when trying to upload. Open the Serial Monitor at a baud rate of 115200.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Finding the ESP IP Address<\/h3>\n\n\n\n<p>Press the ESP8266 RESET button, and it will output the ESP IP address on the Serial Monitor<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"261\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-ip-address.png?resize=513%2C261&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server LED Control GPIOs Arduino IDE IP Address Serial Monitor\" class=\"wp-image-52691\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-ip-address.png?w=513&amp;quality=100&amp;strip=all&amp;ssl=1 513w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-ip-address.png?resize=300%2C153&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure><\/div>\n\n\n\n<p>Copy that IP address, because you need it to access the web server.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Accessing the Web Server<\/h3>\n\n\n\n<p>Open your browser, type the ESP IP address, and you\u2019ll see the following page. This page is sent by the ESP8266 when you make a request on the ESP IP address.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"439\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server.png?resize=596%2C439&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server LED Control GPIOs Arduino IDE\" class=\"wp-image-52680\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server.png?w=596&amp;quality=100&amp;strip=all&amp;ssl=1 596w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server.png?resize=300%2C221&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure><\/div>\n\n\n\n<p>If take a look at the serial monitor, you can see what\u2019s going on on the background. The ESP receives an HTTP request from a new client &#8211; in this case, your browser.<\/p>\n\n\n\n<p>You can also see other information about the HTTP request &#8211; these fields are called HTTP header fields, and they define the operating parameters of an HTTP transaction.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"425\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/http-response.png?resize=667%2C425&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server LED Control GPIOs Serial Monitor Arduino IDE IP Address\" class=\"wp-image-52681\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/http-response.png?w=667&amp;quality=100&amp;strip=all&amp;ssl=1 667w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/http-response.png?resize=300%2C191&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Testing the Web Server<\/h3>\n\n\n\n<p>Let\u2019s test the web server. Click the button to turn <span class=\"rnthl rntclblue\">GPIO 5<\/span> ON. The ESP receives a request on the \/5\/on URL, and turns LED 5 ON.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"384\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/serial-monitor-gpio5-on.png?resize=640%2C384&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server LED Control GPIOs Serial Monitor Arduino IDE\" class=\"wp-image-52684\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/serial-monitor-gpio5-on.png?w=640&amp;quality=100&amp;strip=all&amp;ssl=1 640w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/serial-monitor-gpio5-on.png?resize=300%2C180&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>The LED state is also updated on the web page.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"444\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-state.png?resize=624%2C444&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server LED Control GPIOs\" class=\"wp-image-52683\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-state.png?w=624&amp;quality=100&amp;strip=all&amp;ssl=1 624w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-web-server-state.png?resize=300%2C213&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure><\/div>\n\n\n\n<p>Test <span class=\"rnthl rntclblue\">GPIO 4<\/span> button and check that it works in a similar way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>Now, let\u2019s take a closer look at the code to see how it works, so that you are able to modify it to fulfill your needs.<\/p>\n\n\n\n<p>The first thing you need to do is to include the <span class=\"rnthl rntliteral\">ESP8266WiFi<\/span> library.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Load Wi-Fi library\n#include &lt;ESP8266WiFi.h><\/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 language-c\"><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 language-c\"><code>\/\/ Set web server port number to 80\nWiFiServer 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 language-c\"><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 language-c\"><code>\/\/ Auxiliar variables to store the current output state\nString output5State = \"off\";\nString output4State = \"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 rntclblue\">GPIO 4<\/span> and <span class=\"rnthl rntclblue\">GPIO 5<\/span>. You can use any other suitable GPIOs.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Assign output variables to GPIO pins\nconst int output5 = 5;\nconst int output4 = 4;<\/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>. The <span class=\"rnthl rntliteral\">setup()<\/span> function only runs once when your ESP first boots. 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 language-c\"><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 language-c\"><code>\/\/ Initialize the output variables as outputs\npinMode(output5, OUTPUT);\npinMode(output4, OUTPUT);\n\/\/ Set outputs to LOW\ndigitalWrite(output5, LOW);\ndigitalWrite(output4, 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 prints the ESP IP address in the Serial Monitor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><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 ESP is always listening for incoming clients with this line:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><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 language-c\"><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 we press.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ turns the GPIOs on and off\nif (header.indexOf(\"GET \/5\/on\") >= 0) {\n  Serial.println(\"GPIO 5 on\");\n  output5State = \"on\";\n  digitalWrite(output5, HIGH);\n} else if (header.indexOf(\"GET \/5\/off\") >= 0) {\n  Serial.println(\"GPIO 5 off\");\n  output5State = \"off\";\n  digitalWrite(output5, LOW);\n} else if (header.indexOf(\"GET \/4\/on\") >= 0) {\n  Serial.println(\"GPIO 4 on\");\n  output4State = \"on\";\n  digitalWrite(output4, HIGH);\n} else if (header.indexOf(\"GET \/4\/off\") >= 0) {\n  Serial.println(\"GPIO 4 off\");\n  output4State = \"off\";\n  digitalWrite(output4, LOW);\n}<\/code><\/pre>\n\n\n\n<p>For example, if you\u2019ve pressed the <span class=\"rnthl rntclblue\">GPIO 5<\/span> ON button, the URL changes to the ESP IP address followed by \/5\/ON, and we receive that information on the HTTP header. So, we can check if the header contains the expression GET \/5\/on.<\/p>\n\n\n\n<p>If it contains, the code prints a message on the serial monitor, changes the <span class=\"rnthl rntliteral\">output5State<\/span> variable to on, and 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 generate the web page. The ESP8266 will be sending a response to your browser with some HTML text to display the web page.<\/p>\n\n\n\n<p>The web page is sent to the client using the <span class=\"rnthl rntliteral\">client.println()<\/span> function. You should enter what you want to send to the client as an argument.<\/p>\n\n\n\n<p>The first text you should always send is the following line, that indicates that we\u2019re sending HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;!DOCTYPE html>&lt;html><\/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 language-c\"><code>client.println(\"&lt;head>&lt;meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\");<\/code><\/pre>\n\n\n\n<p>The next one is used to prevent requests related to the favicon &#8211; You don\u2019t need to worry about this line.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>client.println(\"&lt;link rel=\\\"icon\\\" href=\\\"data:,\\\">\");<\/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 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 language-c\"><code>client.println(\"&lt;style>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 some properties to define color, size, border, etc&#8230;<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>client.println(\".button { background-color: #195B6A; 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>Then, we 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 language-c\"><code>client.println(\".button2 {background-color: #77878A;}&lt;\/style>&lt;\/head>\");<\/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 set the first heading of your web page, you can change this text to whatever you like.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Web Page Title\nclient.println(\"&lt;h1>ESP8266 Web Server&lt;\/h1>\");<\/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 rntclblue\">GPIO 5<\/span> current state. As you can see we use the <span class=\"rnthl rntliteral\">output5State<\/span> variable, so that the state updates instantly when this variable changes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>client.println(\"&lt;p>GPIO 5 - State \" + output5State + \"&lt;\/p>\");<\/code><\/pre>\n\n\n\n<p>Then, we display the on or the off button, depending on the current state of the GPIO.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if (output5State==\"off\") {\n client.println(\"&lt;p>&lt;a href=\\\"\/5\/on\\\">&lt;button class=\\\"button\\\">ON&lt;\/button>&lt;\/a>&lt;\/p>\");\n} else {\n client.println(\"&lt;p>&lt;a href=\\\"\/5\/off\\\">&lt;button class=\\\"button button2\\\">OFF&lt;\/button>&lt;\/a>&lt;\/p>\");\n}<\/code><\/pre>\n\n\n\n<p>We use the same procedure for <span class=\"rnthl rntclblue\">GPIO 4<\/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 header variable, and stop the connection with the client with <span class=\"rnthl rntclblue\">client.stop()<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Clear the header variable\nheader = \"\";\n\/\/ Close the connection\nclient.stop();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Taking it Further<\/h2>\n\n\n\n<p>Now that you know how the code works, you can modify the code to add more outputs, or modify your web page. To modify your web page you may need to know some HTML and CSS.<\/p>\n\n\n\n<p>Instead of controlling two LEDs, you can c<a href=\"https:\/\/randomnerdtutorials.com\/guide-for-relay-module-with-arduino\/\">ontrol a relay<\/a> to control practically any electronics appliances.<\/p>\n\n\n\n<p>To build a web server to display sensor readings, you can read the following tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide\/\">ESP8266 DHT Temperature and Humidity Web Server (Arduino IDE)<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-ds18b20-temperature-sensor-web-server-with-arduino-ide\/\">ESP8266 DS18B20 Temperature Web Server (Arduino IDE)<\/a><\/li><\/ul>\n\n\n\n<p>Alternatively, if you want to program your ESP8266 using MicroPython, you can read this tutorial: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-micropython-web-server\/\">ESP32\/ESP8266 MicroPython Web Server \u2013 Control Outputs<\/a><\/p>\n\n\n\n<p>If you like ESP8266 make sure you take a look at our course about<a rel=\"noreferrer noopener\" href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\" target=\"_blank\"> Home Automation with the ESP8266<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PART 2: CREATE A WEB SERVER USING NODEMCU FIRMWARE<\/h2>\n\n\n\n<p>This part shows you how to create a web server to control two outputs using NodeMCU firmware and LUA programming language. You can use this method to create a different web server to fulfill your needs.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"447\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-gpios.jpg?resize=750%2C447&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 Create a Web Server Using NodeMCU Firmware\" class=\"wp-image-52693\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-gpios.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp8266-gpios.jpg?resize=300%2C179&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">First, watch the video demonstration below<\/h2>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/ONKM5lSthNY?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why flashing your ESP8266 module with NodeMCU?<\/h2>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"http:\/\/nodemcu.com\/index_en.html\" target=\"_blank\">NodeMCU<\/a>&nbsp;is a firmware that allows you to program the ESP8266 modules with LUA script. Programming the ESP8266 with LUA using the NodeMCU firmware is very similar to the way you program your Arduino. With just a few lines of code you can establish a WiFi connection, control the ESP8266 GPIOs, turning your&nbsp;ESP8266 into a web server&nbsp;and a lot more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Downloading NodeMCU Flasher for Windows<\/h2>\n\n\n\n<p>After wiring&nbsp;your circuit, you have to download the NodeMCU flasher. It&#8217;s a&nbsp;<strong>.exe<\/strong> file that you can download using one of the following links:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/nodemcu\/nodemcu-flasher\/raw\/master\/Win32\/Release\/ESP8266Flasher.exe\" target=\"_blank\" rel=\"noreferrer noopener\">Win32 <\/a>Windows Flasher<\/li><li><a href=\"https:\/\/github.com\/nodemcu\/nodemcu-flasher\/raw\/master\/Win64\/Release\/ESP8266Flasher.exe\" target=\"_blank\" rel=\"noreferrer noopener\">Win64<\/a> Windows Flasher<\/li><\/ul>\n\n\n\n<p>You can click <a href=\"https:\/\/github.com\/nodemcu\/nodemcu-flasher\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a> to find all the information about NodeMCU flasher.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flashing your ESP8266<\/h2>\n\n\n\n<p>If you&#8217;re using an ESP8266-12 you just need to plug the ESP into your computer. If you&#8217;re using an ESP-01, you need an FTDI programmer to connect it to your computer. To establish&nbsp;a serial communication between your ESP8266 and a FTDI Programmer as shown in the schematic diagram below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"759\" height=\"216\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP8266-Flasher-e1544623897676.png?resize=759%2C216&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 ESP-01 FTDI Programmer Flashing Firmware Circuit\" class=\"wp-image-5131\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP8266-Flasher-e1544623897676.png?w=759&amp;quality=100&amp;strip=all&amp;ssl=1 759w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP8266-Flasher-e1544623897676.png?resize=300%2C85&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/figure><\/div>\n\n\n\n<p>Open the flasher that you just downloaded and a window should appear (as shown in the following figure).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"330\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/nodemcu_flaser.png?resize=570%2C330&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Flasher Software\" class=\"wp-image-5120\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/nodemcu_flaser.png?w=570&amp;quality=100&amp;strip=all&amp;ssl=1 570w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/nodemcu_flaser.png?resize=300%2C174&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure><\/div>\n\n\n\n<p>Press the button &#8220;<strong>Flash<\/strong>&#8221; and it should start the flashing process immediately (You might have to change some of the settings&nbsp;on the Advanced&nbsp;tab). After finishing this process, it should&nbsp;appear a green circle with a check icon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematics<\/h2>\n\n\n\n<p>To build the circuit you need the following parts:<\/p>\n\n\n\n<p><strong>Parts required:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP8266 12-E<\/a>&nbsp;\u2013 read&nbsp;<a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP8266 Wi-Fi Development Boards<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">2x LEDs<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noreferrer noopener\">2x Resistors<\/a>&nbsp;(220 or 330 ohms should work just fine)<\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noreferrer noopener\">Breadboard<\/a><\/li><li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jumper wires<\/a><\/li><\/ul>\n\n\n\n<p>If you&#8217;re using <a href=\"https:\/\/makeradvisor.com\/tools\/esp-01-wi-fi-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP-01<\/a>, you also need an <a href=\"https:\/\/makeradvisor.com\/tools\/ftdi-programmer-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">FTDI programmer<\/a>.<\/p>\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<p><strong>If your using ESP-01&#8230;<\/strong><\/p>\n\n\n\n<p>If you&#8217;re using the ESP8266-01, use the following schematic diagram as a reference.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"754\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?resize=691%2C754&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP-01 Schematic Control LEDs Web Server\" class=\"wp-image-5132\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?w=691&amp;quality=100&amp;strip=all&amp;ssl=1 691w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/ESP-web-server_bb.png?resize=275%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 275w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Uploading the Code<\/h2>\n\n\n\n<p>I recommend using the ESPlorer program created by 4refr0nt&nbsp;to create and save LUA files into your&nbsp;ESP8266. Follow these instructions to download and install ESPlorer:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"http:\/\/esp8266.ru\/esplorer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Click here to download&nbsp;ESPlorer<\/a><\/li><li>Unzip that folder<\/li><li>Go to the <strong>dist&nbsp;<\/strong>folder (here&#8217;s the path:&nbsp;ESPlorer-master\\ESPlorer\\dist)<\/li><li>Run&nbsp;<strong>ESPlorer.jar<\/strong>.&nbsp;It&#8217;s a JAVA program, so you need JAVA installed on&nbsp;your computer.<\/li><li>Open the ESPlorer<\/li><\/ol>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"802\" height=\"598\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer-start.png?resize=802%2C598&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESPlorer ESP8266 NodeMCU Getting Started\" class=\"wp-image-5125\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer-start.png?w=802&amp;quality=100&amp;strip=all&amp;ssl=1 802w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer-start.png?resize=300%2C224&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 802px) 100vw, 802px\" \/><\/figure><\/div>\n\n\n\n<p>You should see a window similar to the preceding Figure, follow these instructions to upload a LUA&nbsp;file:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Connect your FTDI programmer to your computer<\/li><li>Select your FTDI programmer <strong>port<\/strong><\/li><li>Press&nbsp;<strong>Open\/Close<\/strong><\/li><li>Select <strong>NodeMCU+MicroPtyhon tab<\/strong><\/li><li>Create a new file called <strong>init.lua<\/strong><\/li><li>Press <strong>Save to ESP<\/strong><\/li><\/ol>\n\n\n\n<p>Everything that you need to worry about or change is highlighted in red box.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"899\" height=\"650\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?resize=899%2C650&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESPlorer Upload code to ESP8266 NodeMCU Board\" class=\"wp-image-5126\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?w=899&amp;quality=100&amp;strip=all&amp;ssl=1 899w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esplorer_tab.png?resize=300%2C217&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 899px) 100vw, 899px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>Upload the following code into your ESP8266 using the preceding software. Your file should be named &#8220;<strong>init.lua<\/strong>&#8220;. You can <a href=\"https:\/\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/init.zip\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a> to download the file.<br><pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">wifi.setmode(wifi.STATION)\nwifi.sta.config(&quot;YOUR_NETWORK_NAME&quot;,&quot;YOUR_NETWORK_PASSWORD&quot;)\nprint(wifi.sta.getip())\nled1 = 3\nled2 = 4\ngpio.mode(led1, gpio.OUTPUT)\ngpio.mode(led2, gpio.OUTPUT)\nsrv=net.createServer(net.TCP)\nsrv:listen(80,function(conn)\n    conn:on(&quot;receive&quot;, function(client,request)\n        local buf = &quot;&quot;;\n        local _, _, method, path, vars = string.find(request, &quot;([A-Z]+) (.+)?(.+) HTTP&quot;);\n        if(method == nil)then\n            _, _, method, path = string.find(request, &quot;([A-Z]+) (.+) HTTP&quot;);\n        end\n        local _GET = {}\n        if (vars ~= nil)then\n            for k, v in string.gmatch(vars, &quot;(%w+)=(%w+)&amp;*&quot;) do\n                _GET[k] = v\n            end\n        end\n        buf = buf..&quot;&lt;h1&gt; ESP8266 Web Server&lt;\/h1&gt;&quot;;\n        buf = buf..&quot;&lt;p&gt;GPIO0 &lt;a href=\\&quot;?pin=ON1\\&quot;&gt;&lt;button&gt;ON&lt;\/button&gt;&lt;\/a&gt;&amp;nbsp;&lt;a href=\\&quot;?pin=OFF1\\&quot;&gt;&lt;button&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;;\n        buf = buf..&quot;&lt;p&gt;GPIO2 &lt;a href=\\&quot;?pin=ON2\\&quot;&gt;&lt;button&gt;ON&lt;\/button&gt;&lt;\/a&gt;&amp;nbsp;&lt;a href=\\&quot;?pin=OFF2\\&quot;&gt;&lt;button&gt;OFF&lt;\/button&gt;&lt;\/a&gt;&lt;\/p&gt;&quot;;\n        local _on,_off = &quot;&quot;,&quot;&quot;\n        if(_GET.pin == &quot;ON1&quot;)then\n              gpio.write(led1, gpio.HIGH);\n        elseif(_GET.pin == &quot;OFF1&quot;)then\n              gpio.write(led1, gpio.LOW);\n        elseif(_GET.pin == &quot;ON2&quot;)then\n              gpio.write(led2, gpio.HIGH);\n        elseif(_GET.pin == &quot;OFF2&quot;)then\n              gpio.write(led2, gpio.LOW);\n        end\n        client:send(buf);\n        client:close();\n        collectgarbage();\n    end)\nend)\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP8266-Web-Server\/init.lua\" target=\"_blank\">View raw code<\/a><\/p><\/p>\n\n\n\n<p><strong>Don&#8217;t forget to replace your WiFi Station details in that code above (Network Name and Password).<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing your web server<\/h2>\n\n\n\n<p>When your ESP8266 restarts&nbsp;it prints in your serial monitor&nbsp;the IP address of your ESP8266. If you type your ESP8266&nbsp;IP address in your web browser, you can access your web server.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"465\" height=\"299\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/web-server-esp8266.png?resize=465%2C299&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server Control Outputs LEDs\" class=\"wp-image-5121\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/web-server-esp8266.png?w=465&amp;quality=100&amp;strip=all&amp;ssl=1 465w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/web-server-esp8266.png?resize=300%2C193&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 465px) 100vw, 465px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Our Most Popular ESP8266 Projects<\/h2>\n\n\n\n<p>If you like the ESP8266, you may also like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\" target=\"_blank\" rel=\"noreferrer noopener\">Home Automation Using ESP8266<\/a><\/strong><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-wi-fi-button-diy-amazon-dash-button-clone\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP8266 Wi-Fi Button \u2013 DIY Amazon Dash Button Clone<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-daily-task-publish-temperature-readings-to-thingspeak\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP8266 Daily Task \u2013 Publish Temperature Readings to ThingSpeak<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-weather-forecaster\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP8266 Weather Forecaster<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/nextion-display-with-esp8266-touchscreen-user-interface-for-node-red\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nextion Display with ESP8266 \u2013 Touchscreen User Interface for Node-RED<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Do you have any questions?&nbsp;Leave a comment down below!<\/h4>\n\n\n\n<p>Thanks for reading. If you like this post probably you might like my next ones, so please support me by <a href=\"https:\/\/randomnerdtutorials.com\/download\/\">subscribing my blog<\/a>.<\/p>\n\n\n\n<p><em>Updated August 6, 2019<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is a step-by-step guide that shows how to build a standalone ESP8266 Web Server that controls two outputs (two LEDs). This ESP8266 NodeMCU Web Server is mobile responsive &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Build an ESP8266 Web Server &#8211; Code and Schematics (NodeMCU)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/#more-5119\" aria-label=\"Read more about Build an ESP8266 Web Server &#8211; Code and Schematics (NodeMCU)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":52739,"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":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[214,265,300,264,218],"tags":[],"class_list":["post-5119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266","category-esp8266-project","category-0-esp8266","category-project","category-web-server"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2015\/02\/esp8266-web-server-thumbnail.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\/5119","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=5119"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/5119\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/52739"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=5119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=5119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=5119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}