ESP32 Web server with DHT11

ESP32 Web server with DHT11

ESP32 Web server with DHT11,Using Application
ESP32 Web server with DHT11 project image

ESP32 Web server with DHT11

In this article we will learn how to make ESP32 Web server with DHT11.

In the last post we will learn how to make ESP32 Home Automation with Fire base. You can visit our website,
I hope you appreciate my work, let’s discuss about today’s project.

What is ESP-32?

The ESP32 is a powerful microcontroller module developed by Espressif Systems. It’s known for its versatility, featuring Wi-Fi and Bluetooth connectivity along with a dual-core processor, making it suitable for a wide range of IoT (Internet of Things) applications.

Key features:

  • Dual-Core Processor:

The ESP32 features two Tensilica Xtensa LX6 microprocessor cores, which can be individually controlled and used for different tasks.

  • Wireless Connectivity:

It supports both Wi-Fi (802.11 b/g/n) and Bluetooth (BLE) connectivity, enabling easy integration into IoT projects that require wireless communication.

  • Low Power Consumption:

It has power-saving features, which can be beneficial for battery-operated applications.


  • Rich Peripheral Interface:

The ESP32 has a wide range of peripheral interfaces including GPIO, I2C, SPI, UART, ADC, DAC, etc., allowing it to interact with various sensors, displays, motors, and other components.

  • Programmable with Arduino IDE:

You can program the ESP32 using the Arduino IDE, making it accessible to a wide community of developers.

ESP32 Web server with DHT11
ESP32 Web server with DHT11 Circuit diagram

How it works:

Here’s a basic overview of how it works:

  • Microcontroller:

The ESP32 contains a powerful Tensilica Xtensa LX6 microcontroller which can be programmed using the Arduino IDE or other frameworks like Espressif’s IDF (IoT Development Framework).


  • Wi-Fi and Bluetooth Connectivity:

It’s equipped with both Wi-Fi and Bluetooth capabilities, allowing it to connect to wireless networks and communicate with other devices via Bluetooth.

  • GPIO Pins:

The module has a series of General Purpose Input/output (GPIO) pins that can be used to connect and control external devices and sensors. These pins can be programmed to perform various functions.

  • Analog and Digital I/O:

The ESP32 also has analog input pins, enabling it to read analog sensors or voltages.

  • Peripherals and Interfaces:

It supports various communication protocols like SPI, I2C, UART, and more, allowing it to communicate with a wide range of devices and sensors.

  • Programming:

You can write code for the ESP32 using Arduino, Micro Python, or the ESP-IDF (Espressif IoT Development Framework). This code can control its functions, interact with sensors, manage connectivity, and perform a wide array of tasks.

  • Power Supply:

It requires a power supply usually in the range of 3.3V and can be powered via USB or an external power source.


ESP32 Web server with DHT11
ESP32 Web server with DHT11 Working Image

Amazon Links: 

Arduino Nano

Arduino UNO

ESP32 wi-fi module


Other Tools and Components:

Arduino sensor Kit

Top Arduino sensors

Arduino starter kit

Digital Oscilloscope

Variable Power Supplies

digital multimeter

soldering iron kit

PCB small portable drill machine


  • Home Automation:

You can use the ESP32 and DHT11 to monitor temperature and humidity in different rooms of your house. The web server can display this data in real-time, allowing you to remotely check and control your home environment.

  • Greenhouse Monitoring:

For gardening enthusiasts, you can set up the ESP32 and DHT11 in a greenhouse to monitor temperature and humidity levels. The web server interface can display this information and even trigger actions like turning on/off fans or watering systems based on sensor data.

  • Weather Station:

Build a portable weather station using the ESP32 and DHT11. You can collect temperature and humidity data from different locations and display it on a web server, providing a localized weather report.

  • Industrial Monitoring:

In industrial settings, the ESP32 with DHT11 can be employed to monitor environmental conditions within factories or storage facilities. The web server can serve as a dashboard for real-time monitoring and alert systems for abnormal conditions.

  • IoT Education:

This setup can serve as an educational tool for IoT enthusiasts or students to learn about sensor interfacing, web servers, and data visualization. It allows for hands-on experimentation and learning.


  • Remote Control and Alerts:

You can integrate the ESP32 and DHT11 to trigger alerts or actions based on sensor readings. For instance, if the temperature or humidity reaches a critical level, the web server can send notifications or activate devices to control the environment.

Programming Code:


// Import required libraries

#include “WiFi.h”

#include “ESPAsyncWebServer.h”

#include <Adafruit_Sensor.h>

#include <DHT.h>


// Replace with your network credentials

const char* ssid = “Microsolutions”;

const char* password = “”;


#define DHTPIN 26     // Digital pin connected to the DHT sensor


// Uncomment the type of sensor in use:

#define DHTTYPE    DHT11     // DHT 11

//#define DHTTYPE    DHT22     // DHT 22 (AM2302)

//#define DHTTYPE    DHT21     // DHT 21 (AM2301)




// Create AsyncWebServer object on port 80

AsyncWebServer server(80);


String readDHTTemperature() {

// Sensor readings may also be up to 2 seconds ‘old’ (its a very slow sensor)

// Read temperature as Celsius (the default)

//float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

float t = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(t)) {

Serial.println(“Failed to read from DHT sensor!”);

return “–“;


else {


return String(t);




String readDHTHumidity() {

// Sensor readings may also be up to 2 seconds ‘old’ (its a very slow sensor)

float h = dht.readHumidity();

if (isnan(h)) {

Serial.println(“Failed to read from DHT sensor!”);

return “–“;


else {


return String(h);




const char index_html[] PROGMEM = R”rawliteral(



<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”” integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>


html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;


h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }


font-size: 1.5rem;


padding-bottom: 15px;





<h2>ESP32 DHT Server</h2>


<i class=”fas fa-thermometer-half” style=”color:#059e8a;”></i>

<span class=”dht-labels”>Temperature</span>

<span id=”temperature”>%TEMPERATURE%</span>

<sup class=”units”>&deg;C</sup>



<i class=”fas fa-tint” style=”color:#00add6;”></i>

<span class=”dht-labels”>Humidity</span>

<span id=”humidity”>%HUMIDITY%</span>

<sup class=”units”>&percnt;</sup>




setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById(“temperature”).innerHTML = this.responseText;


};“GET”, “/temperature”, true);


}, 10000 ) ;


setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById(“humidity”).innerHTML = this.responseText;


};“GET”, “/humidity”, true);


}, 10000 ) ;




// Replaces placeholder with DHT values

String processor(const String& var){


if(var == “TEMPERATURE”){

return readDHTTemperature();


else if(var == “HUMIDITY”){

return readDHTHumidity();


return String();



void setup(){

// Serial port for debugging purposes





// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {


Serial.println(“Connecting to WiFi..”);



// Print ESP32 Local IP Address



// Route for root / web page

server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, “text/html”, index_html, processor);


server.on(“/temperature”, HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, “text/plain”, readDHTTemperature().c_str());


server.on(“/humidity”, HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, “text/plain”, readDHTHumidity().c_str());



// Start server




void loop(){