ESP32 Web Server Tutorial with a BME280 Sensor
Articles,  Blog

ESP32 Web Server Tutorial with a BME280 Sensor

Dear friends welcome to another ESP32 video
tutorial! In this video, we are going to build a simple
HTTP Web Server on an ESP32 board! We are also going to learn how to make some
requests to it using a web browser. There is a lot to cover, so let’s get started! Hello, guys, I am Nick and welcome to
a channel that is all about DIY electronics projects. In this channel, I share everything about
the projects I build to help you develop similar projects or inspire you to start making things
because it is easy, fun and creative. Subscribe to the channel now if you do not
want to miss any future video. Today’s project is this. An HTTP web server is running on this ESP32
board. If we open a Web Browser and make a request
to the IP address of the ESP32, an HTML page will be loaded with the readings we get from
the BME280 sensor. The values are updated once every minute. The BME280 sensor can measure the temperature,
the humidity, and the barometric pressure and it communicates with the ESP32 using the
I2C interface. Check the ESP32 Weather Station project for
more information. The HTML page also enables us to control the
state of an LED which is connected to the ESP32 board. We can set the state of the LED here and when
we press the Submit button the state of the LED changes. How cool is that! In my opinion, this is a very useful functionality
that it will enable us to build some very interesting projects in the future! Let’s now see how to build this project. The parts needed are the following:
• An ESP32 board • A BME280 sensor
• An LED • A 100Ω Resistor
• A breadboard and • Some wires
The total cost of the project is around 10$. You can find links to all the parts I use
in the description of the video below. You can also use an ESP8266 if you wish but
you will have to make some changes to the code of the project. If you are not familiar with it, the ESP32
is a new WiFi-enabled chip that just hit the market. It offers everything a maker wants, like WiFi,
Bluetooth, two processing cores and a large amount of memory with a cost of around 7$. I prepared a detailed review of the chip a
few weeks ago; you watch it by clicking on the card here. I have connected the BME280 sensor to pins
26 and 27 of the ESP32 board, and the LED to digital pin 32 according to this schematic
diagram. You can find a link to the schematic diagram
in the description of the video below. As you can see the connection is extremely
easy. Now, all we have to do is to load the code. If you have a problem uploading the code to
the board try pressing the Boot button after pressing the upload button on the Arduino
IDE. After the uploading procedure is complete,
open the serial monitor and write down the local IP address of the ESP32 server. Now, if we open up any web browser and type
in this IP address of the server, the server will create an HTML page with the values from
the sensor and two radio buttons that control the state of the LED. We can turn the LED ON or OFF by selecting
a state and pressing the Submit button! Our ESP32 web server works fine! Let’s now see the software side of the project. In order the code to compile we need to download
two libraries. We need a library for the sensor and the WebServer
library. The WebServer library for the ESP32 is not
ready yet, so I am going to use a port of the ESP8266 WebServer library for the ESP32
which works fine. This library provides some very useful methods
that will help us set up the server and handle incoming HTTP requests without needing to
worry about low-level implementation details. You can find links to all the libraries in
the description of the video below. At first, we create a WebServer object, and
we will pass the port where the server will be listening to. Since 80 is the default port for HTTP, we
will use this value. Next, we initialize the sensor, we connect
to the wifi network, and after this, we start the server. In the beginServer function, we define a handling
function for a request to the server. So, if we receive a request to the root path,
it will trigger the execution of the handleRoot function. If the request does not contain any arguments,
the server will reply with an OK message, and it will load the HTML page with values
from the sensor. If the request to the server contains the
LED argument, it will trigger the handleSubmit function. This function retrieves the value of the LED
variable and sets the state of the LED which is connected to the ESP32 board. Finally, it updates the HTML page. Finally, to handle the actual incoming requests,
we need to call the handleClient method on the server object in the main loop function. Please study the code and experiment with
it to better understand it. Only by building this project and by experimenting
with it you are going to understand exactly how it works. You can easily modify this code if you wish
to satisfy your needs and handle many more requests. As always you can find the code of the project
in a link in the video description. This is the first Web Server project we build;
it is quite simple yet powerful. Of course, the web server is only accessible
from the local network, and so any client outside the local network cannot access it. In order for a client to be able to contact
the ESP32 from outside its network, it would need to use the external IP of the network,
and the router would need to be configured to forward the requests on its public IP for
that port to the private IP of the EPS32. This procedure is called port forwarding and
depends on the router used so explaining how to do it in a video is impossible. I would love to hear your opinion about this
small web server project. Do you find this functionality useful and
if so, how do you plan to use it in your projects? Please post your ideas below and don’t forget
to like the video if you find it useful. Thanks! If this is your first time here, I would love
to have you subscribed. In this channel, I post videos about DIY projects
twice a month. I love making things, and I believe that anyone
can make things, anyone can become a maker. That’s why I created this channel, to share
my knowledge with the community and learn from the community. I hope you will join us. I will see you in the next video! [ Translating these subtitles? Add your name here! ]


  • Watch Dog

    Please show us a simple automation project where I can control my home appliances directly from my office….in one word..the port forwarding method

  • squalazzo

    still waiting for some real use of the new advanced features of the esp32… no need on buying it for doing just these simple projects that could be done exactly the same with the much cheaper esp8266… now all you showed on video can be done with NO programming on an esp8266 with just flashing espeasy and using its web interface… 0 lines of code…

  • George Kot

    Another great and helpful tutorial. Νίκο, ξέρεις να μου πείς αν αγοράσω το esp32 απο το link που έχεις, το τελωνείο θα με σκίσει (με τα νέα μέτρα που έχουν βάλει) ??? Ρώταω γιατί κάποια "περνάνε" ενω κάποια άλλα "δέν περνάνε".

  • Bob Wareham

    Hi the project was very interesting I have seen a broker on a Raspberry Pi but was wondering if this ESP could run a Broker server for home automation instead of a Pi? thanks for your channel I have watched it for a long time and find it very interesting.
    Bob UK

  • Robert Lopez

    I was wanting to make a project to control my sprinklers. I thought I had to use mqtt and a server. Could I use this instead? If so, would you consider showing how?

  • Claudio Parada

    Could you make a server automation, like send data to a web server with a data base and access anywhere, to control the system and get the data that the arduino/microcontroller generate.

  • Mple Nter

    Good job, and continue like that!
    Το κουτι που αποθηκευεις τις αντιστάσεις απο που το πειρες ρε συ! ωραιο και πρακτικο φαινετε. δωσε κανενα link.
    Thank you! Thumps up from me!

  • Perspectologist

    Nice tutorial. We used a similar project using MQTT on an ESP8266 to log room temperature and heat/AC duct output temperature at my office. We were able to prove there was an issue and have it quickly resolved by the landlord. Data is power!

  • Upcycle Electronics

    1:56 awesome little resistors storage container. I currently have an old portable cash/change container for most of my resistors but I need to store them by decade groups. I haven't seen your little solution before 😉

  • Max SMoke

    I like the idea of the web interface, but the lack of external network access makes it very limited. It's much more useful to use something like Thingspeak or Blynk, which can connect your devices to any computer or cellphone in the world, for control or monitoring. I personally use a Thingspeak widget on my Android phone to see the Temperature and Humidity of my home well I'm away.

  • Khim Roy

    Hi Sir, my name is Roy Tan 👽 im from Singapore. Many thanks for the hard work of this esp8266 wifi project👍, i have do a modification in your circuit hardward and programming😊. I have change the temperature sensor to DS18B20, and the output LED i have change it to a 5Vdc relay. It work too😃 haha…thanks you Sir

  • Rud Dog

    Not sure if you entertain this type request on your channel if you prefer requests of this type are not made then please disregard this post.

    In need of a detailed video walking, no crawling, through the steps for several items related to the NodeMCU ESP8266.

    How to see what is loaded in the memory of the device.

    How to erase the contents of the memory.

    How to load different firmware, for example, MicorPython then back again to ESP8266 original firmware.

    List the tools for best carry out the listed items above.

    Discuss NodeMCU memory amounts used and why. Have seen discussion on 1Meg and 4Meg but not sure how they are implemented.

    Lastly, if you can dumb it down I am a hobbyist and started my journey down using IOTs a few months back and need all the hand holding I can get.

  • Sebastian Scala

    cool video – but you should add pull-up resistors to the I2C bus to make it work reliably. the ESP32 internal resistors are not sufficient.

  • Elizabeth Zielinski

    This code works only with ESP32. What changes are required to make it working with WemosD1 or ESP8266? Thanks

  • George Troulis

    I'm glad I stumbled upon this channel, you explain things fast but in a way that makes sense 🙂 Φανταστική δουλειά Νίκο, keep up the good work!

  • BakamonNO

    Hi Nick! Would you be able to teach us how to put this project into deep sleep mode please? I watched your deep sleep tutorial. But as you mention deep sleeps does not permit the use of void loop. So how would we go about writing this code in setup. And send the data to a web server?

  • Jacob Lusco

    I get Could not find a valid BME280 sensor, check wiring! no matter what I do. I got the I2C address I set the pins.
    The BME280 works with an Arduino Nano but I cannot get it to work with your code Node MCU ESP32

    I got it to work using P21 and P22 and uploading with the board set to Node32s. I found P21 and P22 are the I2C pins on the NodeMCU esp 32 for address 0x76 for anyone having issues.

  • Matjaž Pintarič

    Hi, nice video.

    What voltage do you have on VIN? I found out that it has to bo from 7-12 V. I put on Vin 5 V from phone accumulator battery but the bluetooth is then not working? The bluetooth is working only if I conect board thrue USB. Any advice?

  • Oleg Volkovskiy

    Please explain us why you used 26 and 27 pins for I2C? why you do not use 21,21 pins with default I2C? also why you dont used resistors 4.7K for I2C?

  • OttoNL

    I just found your Channel and I've already binged a dozen video's. You just happen to do about every project I want to do, so thanks for all these video's 😀

    This one was the first one I tried. The BME280 code werks perfectly, I just happen to have a very similar BME module that requires you to use I2C and your code helped me out. However the webserver code I couldn't get running. I installed the libraries, but I kept getting this error:
    'class WiFiClass' has no member named 'enableSTA'
    I suspect they changed the Library or something.

  • fenom

    friend your video is good but please talk slowly and with lyrisme because your voice is so horrible ,i mean not your voice but you talk in one note ..

  • grumete navegando

    Thanks for your help.
    Do you know if the ESP32 web library is ready?
    I want to make a file on a server that collects the data from an SP32. Any ideas or videos to support me?
    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *