In this Instructable, together we will undertake the journey of programming the ESP8266-12E WIFI Development Board as an HTTP server. Using a web browser we will send instructions to the ESP8266-E12 to change it's behavior. Throughout the process, at each step we will also look under the hood to see what is going on inside. While doing this we will control the on board LED to turn ON and OFF with commands issued via a web browser.

In my previous Instructable Programming the ESP8266-12E using Arduino software/IDE I have described how to add the ESP8266-E12 board to the Arduino software/IDE and write your first sketch to blink the on board LED. The code is hardwired, hence on power up the ESP-8266-12E does what it is suppose to do - blink the LEDs. One cannot change the behavior of the board without reprogramming it.

In an ideal world of IoT the ESP8266-E12 should communicate with us over WiFi and over the the internet. We should be able to control the ESP-8266-E12 over Wifi using protocols specific to the internet. We should be able to instruct the ESP-8266-12E to do "Things" without having to reprogram.

Step 1: Opening the "Connect to a Network" Window

In your Windows environment open the Network and Sharing Center. You get to the Network and Sharing Center via the Control Panel.

Click on Connect to a network to open theConnect to a networkwindow. Leave it open, we will be referring to this window often. You may shut the Network and Sharing Center.

Step 2: Writing the SimpleWebServer Sketch

Connect your ESP8266-12E to your computer.

Open your Arduino program/IDE and paste the following code:

#include <ESP8266WiFi.h>

WiFiServer server(80); //Initialize the server on Port 80

void setup() {

WiFi.mode(WIFI_AP); //Our ESP8266-12E is an AccessPoint
WiFi.softAP("Hello_IoT", "12345678"); // Provide the (SSID, password); .
server.begin(); // Start the HTTP Server


void loop() { }

This boiler plate code will be a part of every ESP8266 sketch we write. This code does the following:

- Includes the ESP8266 library ESP8266WiFi.h.
- Creates the instance "server" of the class "WiFiServer" listening on port 80. Notice "server" is a global instance.
- Set the mode of our ESP8266 to be an Access Point (AP).
- Provide the SSID and password. The password / passphrase has to be at least 8 characters long.

- Fire-up our server by calling the begin() method.

Save as SimpleWebServer sketch. Compile and upload the sketch to your ESP8266-12E.

Step 3: Checking Our Server

Open the "Connect to network" window. You should see our server with SSID "Hello_IoT" in the list. Select the Hello_IoT network, provide the password/passphrase and save it.

Hurrah our ESP8266-12E is operating as a HTTP server listening on port 80.

Step 4: Looking Under the Hood

Launch the Serial MonitorTools | Serial Monitor or with the shortcut keys Crtl-Shift-M.

Step 5: Get HTTP Server Information From the ESP8266-12E

Add the following piece of code in the end of the setup() function:

//Looking under the hood
Serial.begin(115200); //Start communication between the ESP8266-12E and the monitor window
HTTPS_ServerIP= WiFi.softAPIP(); // Obtain the IP of the Server
Serial.print("Server IP is: "); // Print the IP to the monitor window

Compile and load the sketch and watch the Monitor Window. You should see the default IP address of the ESP8266-12E as

Step 6: Web Browser Connects/Talks to Server

It is time for a web browser to connect to our HTTP server.

Enter the following code within the loop() function:

WiFiClient client = server.available();
if (!client) {
//Looking under the hood
Serial.println("Somebody has connected :)");

Compile and load to the ESP8266-E12.

Open a browser window and enter and and hit enter.

Observe your Monitor window to check for a connection.

Step 7: Listen to What the Browser Is Sending to the HTTP Server

The web browser connects to the HTTP server and sends the request. The server receives the request and does something with it. Rather it can do a lot of different things.

Enter the following code in the loop() function.

//Read what the browser has sent into a String class and print the request to the monitor
String request = client.readString();
//Looking under the hood

Compile and upload to the ESP8266-E12. Enter the following in the address field of your browser

The browser sends a GET request to the server. Notice "/PARAM" following the GET request. Off all the text sent we are only interested in the first line of the request. Thus we replace the code
String request = client.readString();
String request = client.readStringUntil('\r');

Step 8: Turning the LED ON/OFF Through the Web Browser

We are ready to turn the LED on GPIO16 ON/OFF through commands given via the web browser.

Firstly initialize the digital port GPIO16 as an output port and keep the initial state of the LED ON.
At the bottom of setup() function add the following lines of code:

pinMode(LED_PIN, OUTPUT); //GPIO16 is an OUTPUT pin;
digitalWrite(LED_PIN, LOW); //Initial state is ON

At the bottom of loop() function add the following lines of code:

// Handle the Request

if (request.indexOf("/OFF") != -1){
digitalWrite(LED_PIN, HIGH); }
else if (request.indexOf("/ON") != -1){
digitalWrite(LED_PIN, LOW);

In the address bar of your browse type the following URL:

The LED on the ESP8266-E12 will turn OFF.

Then type the following URL:

The LED on the ESP8266-E12 will turn ON.

Step 9: Let Us Get a Little Fancy

It is cumbersome to change the URL each time we need to turn the LED ON or OFF. Let us add some HTML code and some buttons.

Copy this code and add it at the bottom of the Loop() function:

// Prepare the HTML document to respond and add buttons:


//Serve the HTML document to the browser.

client.flush(); //clear previous info in the stream
client.print(s); // Send the response to the client
Serial.println("Client disonnected"); //Looking under the hood

Compile and load.

HAPPY IoTing!!!

<p>I have other scripting exp but an absolute Noob here. All went well till i tried connect to device with Chrome via <a href="" rel="nofollow"> </a> and got no response via Serial Monitor. Got &quot;Server IP is:; tried to connect and nothing ? Nor did the next step work with <a href="" rel="nofollow"></a></p><p>Please help...</p>
<p>neither can I connect this IP through chrome! how do you solve this problem?</p>
<p>Did you connect your computer wifi to the ESP8266?</p>
<p><a href="https://www.instructables.com/member/pomeloteaNQ" rel="nofollow">pomeloteaNQ</a> yes i did sort it out... was ages ago and i was just trying this out to see what could be done &amp; not done much since... i seem to remember i had a typo or had to delete &quot;hidden&quot; characters in the text that i copied from the page above. <a href="https://www.instructables.com/member/DmitryI" rel="nofollow">DmitryI</a> message below also rings a bell but may have been another project where i had to hard code a pin number rather than the name. Sorry.</p><p>But it did work in the end - good luck.</p>
<p>Did you connect your computer wifi to the ESP8266?</p>
<p>Not to worry - sorted it out. Probably some cut and paste errors that the others didnt get. Thanks !</p>
<p>It worked rather well, except i had to redefine &quot;LED_PIN&quot; as just &quot;14&quot; and the on board LED lights up. A bit hard to follow the instructables as if code should be there first and than pictures to explain what it does perhaps. Regardless that I thank you for you time writing it.</p>
<p>HI. All good now, thanks heaps</p>
<p>Hi. I love the sketch and any other of your works that I have seen, well<br> done. This is exactly what I was looking for to set up a VPN using a <br>couple of Wemos D1's. Everything compiles/uploads until I get the IDE <br>error message that 'LED_PIN' was not declared in this scope. I have <br>followed the tute several times and get the same error. I am a bube, <br>looking to learn, but it looks like it was previously declared in the <br>setup loop. Thanks again, great work.</p><p><strong><br></strong></p>
<p>Add the following line above setup()</p><p>#define LED_PIN 16</p><p>Let me know if it worked. Good luck!</p>
I will duplicate it on my board and let you know.
<p>Hi,</p><p>I think I found what's going wrong.</p><p>Hello_IoT takes the IP address of the computer, so that does not work.</p><p>We have no DHCP but fixed IP. So somewhere in the ESP8266 set up we need &agrave; fixed IP on .</p><p>My printer works on and is no problem.</p><p>But how to set that on the ESP8266, that I do not know.</p><p>In Windows 10 I cant approach &quot;Hello_IoT to adjust.</p><p>1ste foto Is the IP from my computer.</p><p>2de fot is what Hello_IoT does.</p>
<p>Your esp8266 does not connect to the router. It is an access point. You should connect directly into the ESP8266 just like connecting into a router.</p>
<p>I have tray it meny thime, can't connect</p>
<p>Here I sit with a problem.</p><p>Tried without password.</p><p>So try network password does not work, also 12345678 is not work.</p><p>If I upload the program with 57600 baud, I get following information: </p><p>0x2d </p><p>v09f0c112 </p><p>~ ld Server IP is: </p><p>Thought so that would be a key v09f0c112.</p><p>Nothing helps.</p><p>Get in serial monitor also not &quot;Somebody has connected&quot; can also do not reach the page</p><p>Upload with 11520, give my only the IP</p>
<p>Pierre; This facebook group is very active helping newcomers. If you have facebook account, join the group. https://goo.gl/nb1rVq</p>
<p>Am a novice, Fleming from Belgium, 72 years young.</p><p>Am the ESP5266-12th started under the Boardname: &quot;WeMos-D1R2 &amp; mini&quot; At step 5, here I get 1 line, the Server IP.</p><p>Step 6. Data at the void Loop (). Just get the Server Ip, not more.</p><p>Did not work with this Board, so chosen other Board &quot;NodeMCU 1.0 (ESP-12th Module)&quot; here I could places the data on the Board , but get back only Server IP.</p><p>Have tried to access Hello_IoT by the password of the Wifi connection, but don't get any connection. </p><p>Then tried the code from the Board, &quot;VID and PID&quot; behind each other as &quot;1A867523&quot; that do not work.</p><p>Can of course be that linking too early.</p><p>Can someone help me there. Mail may also, &quot;p.vanovermeire@gmail.com&quot; Skype name &quot;lappierre&quot;</p>
<p>Can you see &quot;<em>Hello_IoT&quot; </em>name to connect to the ESP8266 in your computer or mobile phone?<br> </p><p><em> </em></p>
<p>Hi jainrk, yes i can see it on my computer. But can not connect it with my password.</p>
<p>What i have is:</p><p>https://nl.aliexpress.com/item/ESP8266-ESP-12E-UART-WIFI-Wireless-Shield-Development-Board-for-Arduino-UNO-R3-TE482/32671219535.html?spm=2114.13010608.0.0.32uLPD</p>
<p>There are some inconsistencies but the commentaries solved the doubts. Very nice. Thanks a lot</p>
<p>Just made it!</p>
<p>Very nice tutorial.</p>
<p>Another excellent tutorial of yours. I was facing some problems to establish the network initially, but it was because of the short passkey I chose. <br><br>A great introduction to IoT. Thank you once agian. </p>
<p>When listening on the com port I get very strange/obscurs reading like &quot;len 138L&euro;&quot; or &quot;00, leu&yuml;&ocirc;&ordm;&yuml;L&aelig;&quot;.</p>
Maybe you com speed needs changing.
<p>Didn't work for me so far. I got to step 8 and didn't see where the gpio pin &quot;LED_PIN&quot; was declared. Since I'm using a ESP12E I changed to gpio-4 by adding a declaration prior to setup of &quot;int LED_PIN = 4;&quot;. Then added the next part to handle the request. Uploaded that and nothing happened. The serial monitor shows &quot;Somebody has connected&quot; and &quot;Get /off HTTP/1.1&quot; or &quot;Get /on HTTP/1.1&quot; depending on what I put in the address. The browser ( Chrome, on my smart phone) indicated &quot;... the page was not working didn't send any data...ERROR_EMPTY_RESPONSE&quot;. The gpio never changed states either. I've built servers using Nodemcu/lua in the past modeling from other examples. I wanted to move to the arduino IDE due to the slow development of the Nodemcu IDE platform. I must admit I'm just learning the intrices of Arduino IDE. It seemed easier using Nodemcu at least for me.</p>
<p>Hello , how to switch off AP module ? Thank</p>
<p>oh, wow, BRILLIANT. Worked first time!</p>
<p>hellow .</p><p>i tried the instructions and program you have given. my practical was successful , </p><p>but the thing where i am getting the problem is , </p><p>when i power off the esp8266 device and when the power comes back , it doesnt start the program i have uploaded , i need to reprogram it to make it work again.</p><p>my pin connections are :</p><p>ESP8266-12E : TTL</p><p>while programming the esp8266 via ttl.</p><p>gnd - gnd</p><p>vcc - vcc (3.3v)</p><p>en - (3.3v)</p><p>rx - tx</p><p>tx -rx</p><p>GPIO 0 - GND</p><p>GPIO 15 - GND</p><p>AFTER PROGRAMMING I REMOVE GPIO 0 AND GPIO 15 FROM the ground. </p><p>the program i have uploaded only works once when the upload is complete but not after the power goes and comes again. </p><p>please help i have read a lot of things on internet. and have failed solving the issue.</p><p>thanks in advance</p>
<p>just a few pics of my setuperish</p>
<p>brill one again! Went straight through ok. Only had to change board to wemos and not the nodemcu. Oh and for mine LED_BUILTIN used instead of LED_PIN. Created another line to make the led blink too..</p><p>else if (request.indexOf(&quot;/BLINK&quot;) !=-1){<br> for(int t=0;t&lt;10;++t){<br> digitalWrite(LED_BUILTIN, LOW);<br> delay(1000);<br> digitalWrite(LED_BUILTIN, HIGH);<br> delay(500);<br> }</p><p>and the little buttons on the page are really cool for a start. I didn't know you could do that within the arduino sketch!</p><p>Thanks agin :-D</p>
<p>Nice intro. Where should I look to go further? </p>
<p>Hey, your instructable plus another has led me to creating this code.<br><a href="https://github.com/TheExpertNoob/ESP8266-Wifi-NeoPixel/blob/master/ESP8266PixelWebController.ino" rel="nofollow">https://github.com/TheExpertNoob/ESP8266-Wifi-NeoP...</a><br>However, using if/else statements, my (neopixel)functions have to complete before it continues (loading page ect) I tried expierimenting using a switch/case statement, but those dont handle strings from index.Of Also, I need a way to loop that function until a different one is called. Anyone have suggestions?</p><p>I considered using an int value inside the else/if statements to pass to a switch/case that then executes the neopixel functions, but that seems a bit &quot;extra&quot;</p>
<p>Try this https://github.com/ivanseidel/ArduinoThread</p>
<p>Very nicely done! Lots of people will enjoy following this instructable. Keep posting em please.</p>
<p>Thanks. Nice tutorial...</p>
<p>Hi love that you're sharing your know-how with us, I'm still learning to make the Arduino do tricks %) and just got a WeMos D1R2 and have been stoked at how similar it all is. But I learn best by poking at existing code. Soooooo.... I was wondering if you have the sketch and could post it as a file here? </p><p>PS: wrt Instructbles mangling html code, I usually add the URL where I find particular code snippets etc right to the sketch when I download them, in a long comment &quot;/*............................*/&quot; near the end, I imagine you could sneak html into there too? </p>
<p>I second the request to post the sketch. I'm getting a &quot;stray \&quot; when I try to manually copy the code that was apparently &quot;mangled by Instructables&quot; Thanks.</p>
<p>Hi and thanks for good tutorial.</p><p>I have a problem with my module.when I upload the server program,in serial monitor repeatedly show this massage</p><p>wifi evt:1</p><p>STA disconnect:201</p><p>wifi evt:1</p><p>wifi evt:7</p><p>I can't fix this problem and can't find any solution in net.my module works well when I use the blink example.</p><p>I use 3.4v power supply with 0.9A current and IDE1.6.9.</p><p>Please help me to fix my problem.</p>
<p>Fantastic tutorial. Thanks</p>
<p>Dear Mr Jainrk,</p><p>Your tutorial has helped us a lot, would you be kind to<br>include a switch to the system?</p><p>So that we can have both input and output for the 8266<br>module. Thank you. </p>
<p>hello i get this error :serial does not name a type someone can help me?</p>
<p>Also, &quot;serial&quot; is not the same as &quot;Serial&quot; - it's case sensitive. So, &quot;serial.println();&quot; is treated differently to &quot;Serial.println();&quot; </p>
<p>Hi, great tutorial. Got me started off with Access point!. Next i will work on controlling from internet.</p><p>I have one issue, this particular line - (in let us get a little fancy)</p><p> s += &quot;&lt;br&gt;&lt;input type=\ &quot;button\ &quot; name = \&quot;b1\&quot; value=\ &quot;Turn LED OFF\&quot; onclick=\&quot;location.href='/OFF'\ &quot;&gt;&quot;;</p><p>I get an error - stray '\' in program - when I compile. I tried the code in w3schools do it yourself section, tweaked it till the button was right. Then I copied the code back to the Arduino IDE and I get a whole lot of other errors like ';' expected etc.</p><p>Any suggestions pls?</p>
<p>s += &quot;&lt;br&gt;&lt;input type =\&quot;button\&quot; name=\&quot;b1\&quot; value=\&quot;Turn LED OFF\&quot; onclick=\&quot;location.href='/OFF'\&quot;&gt;&quot;;</p>
<p>Very cool tutorial! You helped me make my first steps into the IoT world!</p><p>Do you know how to change the code so the button size can be defined? I am using my IPhone 5S to control the ESP8266 and the buttons on the website are really realllly tiny ;-)</p>

About This Instructable




More by jainrk:ESP8266: I2C PORT and Address Scanner $1 USB to UART-serial flashing device (dongle) with 3.3 V power supply for ESP8266MOD ESP-12 module Program/Flash the ESP8266MOD ESP-12 module using the Witty Board and Arduino IDE 
Add instructable to: