Set up a local web server on the NodeMCU

Objectives

• To set up a webserver on the NodeMCU to display sensor values

Things

1. NodeMCU (quantity: 1 no.)
2. Breadboard (quantity: 1 no.)
3. IR distance sensor (quantity: 1 no.)
4. Jumper cables (quantity: 8 no.)
5. Micro USB to USB cable (quantity: 1 no.)
6. Arduino IDE on your computer

Let’s begin!

An ESP8266 is capable of setting up a web server which can be accessed by any device connected to the local network of the ESP8266. It can then display a web page on the server’s IP.

Let’s connect an IR sensor and view its values on a webpage hosted on a server using a NodeMCU.

Interfacing IR sensor to NodeMCU

Final Code

To copy the code, right click on view raw at the bottom of the code, click on open link in new tab and then copy the code.

Uploading the code

Step 1: Enter the final code in the Arduino IDE window.

• When you click on New to open a new blank code in the Arduino IDE, you will get a new  window with two functions: void setup() and void loop()
• You can either type commands as shown in the final code under void setup() and void loop() functions or
• delete the contents of this window. Then copy and paste the final code in the Arduino IDE window.

Step 2: Compile/ verify the code by clicking on the verify button.

• Make sure the board is connected to your computer
• Check if the correct board and port is selected.

Step 3: Upload the code by clicking on the upload button, which is right next to the verify button.

• The Arduino IDE provides a progress bar when it’s uploading.
• After it is done, you will see “Done uploading” on the bottom left of your IDE.
• If you encounter any errors, you need to go back to the code and fix the errors.

There you go!

Once the code is uploaded, open the Serial Monitor and look for the IP address of the server. It will usually look like 192.168.0.xxx.

Type this IP address in any browser of your choice like Chrome or Firefox and the webpage will be displayed