Arduino Nano ESP32 - Web Server

In this step-by-step tutorial, we'll show you how to program to make an Arduino Nano ESP32 board become a web server. You'll be able to access web pages hosted on the Arduino Nano ESP32 using a web browser on your computer or smartphone, enabling you to view data from the Arduino Nano ESP32 and control it. To make it easy, we will progress from simple to more challenging steps as follows:

Arduino Nano ESP32 relay web browser

Hardware Preparation

1×Arduino Nano ESP32
1×USB Cable Type-C
1×(Recommended) Screw Terminal Adapter for Arduino Nano

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you. We appreciate your support.

Reading the sensor value from Arduino Nano ESP32 via Web

This is relatively simple. The Arduino Nano ESP32 code does the following tasks:

  • Creating a web server that listens for HTTP requests from a web browser.
  • Upon receiving a request from a web browser, the Arduino Nano ESP32 responds with the following information:
    • HTTP header
    • HTTP body: This includes HTML content and the value read from the sensor.

    Below is the Arduino Nano ESP32 code that performs the above tasks:

    /* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server */ #include <WiFi.h> #include <ESPAsyncWebServer.h> const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT AsyncWebServer server(80); void setup() { Serial.begin(9600); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // Define a route to serve the HTML page server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /"); // for debugging request->send(200, "text/html", "<html><body><h1>Hello, Arduino Nano ESP32!</h1></body></html>"); }); // Start the server server.begin(); } void loop() { // Your code here }

    Detailed Instructions

    To get started with Arduino Nano ESP32, follow these steps:

    • If you are new to Arduino Nano ESP32, refer to the tutorial on how to set up the environment for Arduino Nano ESP32 in the Arduino IDE.
    • Connect the Arduino Nano ESP32 board to your computer using a USB cable.
    • Launch the Arduino IDE on your computer.
    • Select the Arduino Nano ESP32) board and its corresponding COM port.
    • Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
    • Search “ESPAsyncWebServer”, then find the ESPAsyncWebServer.
    • Click Install button to install ESPAsyncWebServer library by lacamera.
    Arduino Nano ESP32 ESPAsyncWebServer library
    • You will be asked to install the dependency. Click Install All button.
    Arduino Nano ESP32 ESPAsyncWebServer dependencies library
    • Copy the above code and open with Arduino IDE
    • Change the wifi information (SSID and password) in the code to yours
    • Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
    • Open the Serial Monitor
    • Check out the result on Serial Monitor.
    COM6
    Send
    Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.5
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  
    • Take note of the IP address displayed, and enter this address into the address bar of a web browser on your smartphone or PC.
    • As a result, you will see the following output on the Serial Monitor.
    COM6
    Send
    Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.5 Arduino Nano ESP32 Web Server: New request received: GET /
    Autoscroll Show timestamp
    Clear output
    9600 baud  
    Newline  
    • Once you access the web browser using the IP address, you will be presented with a very basic web page displaying "Hello, ESP32!". The page will look like the following:
    Arduino Nano ESP32 web server

Reading the sensor value from Arduino Nano ESP32 via Web

Below is the Arduino Nano ESP32 code that prints the temperature value to web page:

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server */ #include <WiFi.h> #include <ESPAsyncWebServer.h> const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT AsyncWebServer server(80); float getTemperature() { // YOUR SENSOR IMPLEMENTATION HERE // simulate the temperature value float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000 return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float } void setup() { Serial.begin(9600); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // Define a route to serve the HTML page server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /"); // for debugging // get temperature from sensor float temperature = getTemperature(); // Format the temperature with two decimal places String temperatureStr = String(temperature, 2); String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel=\"icon\" href=\"data:,\">"; html += "</head>"; html += "<p>"; html += "Temperature: <span style=\"color: red;\">"; html += temperature; html += "&deg;C</span>"; html += "</p>"; html += "</html>"; request->send(200, "text/html", html); }); // Start the server server.begin(); } void loop() { // Your code here }

Detailed Instructions

  • Copy the above code and open with Arduino IDE
  • Change the wifi information (SSID and password) in the code to yours
  • Upload the code to Arduino Nano ESP32
  • Once you access the web browser using the IP address, you will be presented with a very basic web page displaying information about the Arduino Nano ESP32 board. The page will look like the following:
Arduino Nano ESP32 temperature web server

To make the web page look fantastic with a graphic user interface (UI), check out the final section of this tutorial.

※ NOTE THAT:

With the code provided above, to get the termperature update, you have to reload the page on the web browser. In a next part, we will learn how to make web page update the temperature value on backround without reloading the webpage.

Controlling the Arduino Nano ESP32 via Web

Controlling something connected to Arduino Nano ESP32 is a bit more challenging than just reading a value. That's because Arduino Nano ESP32 has to understand the request it receives from the web browser to know what action to take.

For a more comprehensive and detailed example, I recommend checking out the tutorials listed below:

Separating HTML content into another file on Arduino IDE

If you want to create a simple web page with minimal content, you can embed the HTML directly into the Arduino Nano ESP32 code, as explained earlier.

However, if you want to make a more sophisticated and impressive web page with larger content, it becomes inconvenient to include all the HTML, CSS, and Javascript directly in the Arduino Nano ESP32 code. In this situation, you can use a different approach to manage the code:

  • The Arduino Nano ESP32 code will be placed in a .ino file, just like before.
  • The HTML code (HTML, CSS, Javascript) will be placed in a separate .h file. This allows you to keep the web page content separate from the Arduino Nano ESP32 code, making it easier to manage and modify.

To do so, we need to do two major steps:

  • Preparing HTML content
  • Programming Arduino Nano ESP32

Preparing HTML content

  • Create an HTML file on your local PC that contains the HTML content (HTML, CSS, and Javascript) for your UI design.
  • In the HTML file, where data from Arduino Nano ESP32 should be displayed, use an arbitrary value.
  • Test and modify it until you are satisfied.
  • We will put the HTML content in the .h file on the Arduino IDE. See the next step.

Programming Arduino Nano ESP32

  • Open the Arduino IDE and create a new sketch. Give it a name, for example, newbiely.com.ino.
  • Copy the code provided below and paste it to the created file.
/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include "index.h" // Include the index.h file const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT AsyncWebServer server(80); float getTemperature() { // YOUR SENSOR IMPLEMENTATION HERE // simulate the temperature value float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000 return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float } void setup() { Serial.begin(9600); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // Serve the HTML page from the file server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /"); // for debugging request->send(200, "text/html", webpage); }); // Define a route to get the temperature data server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest* request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); // for debugging Serial.println("GET /temperature"); // for debugging float temperature = getTemperature(); // Format the temperature with two decimal places String temperatureStr = String(temperature, 2); request->send(200, "text/plain", temperatureStr); }); // Start the server server.begin(); } void loop() { // Your code here }
  • Change the WiFi information (SSID and password) in the code to yours
  • Create the index.h file On Arduino IDE by:
Arduino IDE 2 adds file
  • Either click on the button just below the serial monitor icon and choose New Tab, or use Ctrl+Shift+N keys.
  • Give file's name index.h and click OK button
Arduino IDE 2 adds file index.h
  • Copy the below code and paste it to the index.h.
/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( REPLACE_YOUR_HTML_CONTENT_HERE )====="; #endif
  • Replace the line REPLACE_YOUR_HTML_CONTENT_HERE by your HTML content you prepared before. There is no problem with new line character. The below is an example of index.h file:
/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE html> <html> <head> <title>Arduino Nano ESP32 Temperature</title> </head> <body> <h1>Arduino Nano ESP32 Temperature</h1> <p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> &#8451;</span></p> <script> function fetchTemperature() { fetch("/temperature") .then(response => response.text()) .then(data => { document.getElementById("temperature").textContent = data; }); } fetchTemperature(); setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds </script> </body> </html> )====="; #endif
  • Now you have the code in two files: newbiely.com.ino and index.h
  • Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
  • Access the web page of Arduino Nano ESP32 board via web browser as before. You will see it as below:
Arduino Nano ESP32 temperature web browser

※ NOTE THAT:

In the above codes:

  • The HTML code is designed to update the temperature in the background at regular intervals, currently set to every 4 seconds in the code. This means that the temperature value is automatically refreshed without the need to manually reload the webpage. You can adjust the update interval in the code to suit your preferences.
  • Arduino Nano ESP32 code serves two requests from the web browser.
    • One request to return the HTML content of the webpage
    • The other to return the temperature value requested by the webpage on the backround

For a more comprehensive and detailed illustration, please refer to the Arduino Nano ESP32 - DS18B20 Temperature Sensor via Web tutorial

※ NOTE THAT:

  • If you make changes to the HTML content within the index.h file but don't modify anything in the newbiely.com.ino file, the Arduino IDE won't refresh or update the HTML content when you compile and upload the code to the Arduino Nano ESP32.
  • To force the Arduino IDE to update the HTML content in this situation, you need to make a modification in the newbiely.com.ino file. For example, you can add an empty line or insert a comment. This action triggers the IDE to recognize that there have been changes in the project, ensuring that your updated HTML content gets included in the upload.

Arduino Nano ESP32 Web Server - Multiple Pages

Check out this Arduino Nano ESP32 - Web Server Multiple Pages tutorial.