Overview
In this step-by-step tutorial, you’ll learn how to set up a web server with ESP32 and create a web page using HTML and CSS.
What You Will Learn
- Getting to know the web server
- Creating a web server with ESP32
- A short introduction to HTML and CSS commands
What is a Web Server?
The web server is a place to send and receive information, process the information and store it. The web server can also display this information on a web page.
the server communicates with the user through a protocol called the Hypertext Transfer Protocol (HTTP).
When a request is sent to this server (for example, its address is searched in the browser), the server returns a code as a response (for example, code 200, which means the connection is established correctly, or code 404, which indicates that the address is not correct). You can find the full list of these codes here
Required Materials
Hardware Components
Software Apps
Setting up ESP32 in Station Mode (STA)
In this case, the ESP32 module is connected to the Wi-Fi router as a Client and can access the Internet through the router.
ESP32 Web server Code
To start the ESP32 web server in STA mode, just upload the following code on the board. If you are a beginner with ESP32, read the ESP32 tutorial here.
/*
ESP32 Web Server - STA Mode
modified on 25 MAy 2019
by Mohammadreza Akbari @ Electropeak
Home
*/
#include <WiFi.h>
#include <WebServer.h>
// SSID & Password
const char* ssid = "*****"; // Enter your SSID here
const char* password = "*****"; //Enter your Password here
WebServer server(80); // Object of WebServer(HTTP port, 80 is defult)
void setup() {
Serial.begin(115200);
Serial.println("Try Connecting to ");
Serial.println(ssid);
// Connect to your wi-fi modem
WiFi.begin(ssid, password);
// Check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected successfully");
Serial.print("Got IP: ");
Serial.println(WiFi.localIP()); //Show ESP32 IP on serial
server.on("/", handle_root);
server.begin();
Serial.println("HTTP server started");
delay(100);
}
void loop() {
server.handleClient();
}
// HTML & CSS contents which display on web server
String HTML = "<!DOCTYPE html>\
<html>\
<body>\
<h1>My First Web Server with ESP32 - Station Mode 😊</h1>\
</body>\
</html>";
// Handle root url (/)
void handle_root() {
server.send(200, "text/html", HTML);
}Once you’ve uploaded the code, open the serial monitor window. If you’ve entered the correct SSID and password, after a few seconds, ESP32 will connect to the router and give you an IP address.
By entering this IP in your browser you can see the web page you have just created.
Note
About the ESP32 Web server Code:
#include <WiFi.h>
#include <WebServer.h>Two required libraries have been added at the beginning of the code. The WiFi.h library is used to set up the wifi section and WebServer.h library to build a web page.
const char* ssid = "****";
const char* password = "****";Enter the SSID and the password of your router in these two lines.
WebServer server(80);This command defines an object called the server from the webserver class. With this object, you can create a web page on Port 80.
In the setup section, serial communication is initially started.
WiFi.begin(ssid, password);With the WiFi.begin command, ESP32 attempts to connect to your wifi router with the SSID and the password that is defined in the code.
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected successfully");Serial.print("Got IP: ");
Serial.println(WiFi.localIP());server.on("/", handle_root);In the above code, when the main address (place a / after the IP) is searched in the browser, the handle_root function is called.
Finally, with the server. begin command, your web server starts working.
In the loop section, only the handleClient method is called, so your code (the server that you built) is always checking the web server to manage the events occurring on the server.
String HTML = "<!DOCTYPE html>\
<html>\
<body>\
<h1>My First Web Server with ESP32 - Station Mode 😊</h1>\
</body>\
</html>";The HTML string contains the code that should be displayed on the web page. At the end of this tutorial, you can find a basic tutorial on HTML coding for beginners.
Tip
void handle_root() {
server.send(200, "text/html", HTML);
}
Setting up ESP32 in Access Point Mode (AP)
Code
/*
ESP32 Web Server - AP Mode
modified on 25 MAy 2019
by Mohammadreza Akbari @ Electropeak
Home
*/
#include <WiFi.h>
#include <WebServer.h>
// SSID & Password
const char* ssid = "Electripeak"; // Enter your SSID here
const char* password = "123456789"; //Enter your Password here
// IP Address details
IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
WebServer server(80); // Object of WebServer(HTTP port, 80 is defult)
void setup() {
Serial.begin(115200);
// Create SoftAP
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
Serial.print("Connect to My access point: ");
Serial.println(ssid);
server.on("/", handle_root);
server.begin();
Serial.println("HTTP server started");
delay(100);
}
void loop() {
server.handleClient();
}
// HTML & CSS contents which display on web server
String HTML = "<!DOCTYPE html>\
<html>\
<body>\
<h1>My First Web Server with ESP32 - AP Mode 😊</h1>\
</body>\
</html>";
// Handle root url (/)
void handle_root() {
server.send(200, "text/html", HTML);
}
About the Code
const char* ssid = "Electropeak";
const char* password = "123456789";IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);HTML and CSS Basic Commands
HTML has tags that place between <>. All HTML commands should be placed between these tags. You can use this link to test your codes online.
CSS stands for Cascading Style Sheets. CSS commands specify how HTML code and instructions are displayed to the user.
<!DOCTYPE html>
The first line of each HTML code should be <DOCTYPE html> . This command is not an HTML command. With this code, you are anouncing the browser which version of HTML you used to write the web page.
<!DOCTYPE html><html> codes… <\html>Inserting Headlines
You can use the tags to to create headlines in different sizes.
<h1>This is heading 1</h1>
Inserting Paragraphs
Use the tag to insert a new paragraph and write your text between it.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
Bold Texts
You can use the HTML tag or the CSS command to bold the texts.
<b>This is bold text</b>
Adding a Link
With the tag you can place the URL as a link in your page.
<a href="https://electropeak.com/">Visit Electropeak</a>
Adding Images
You can add images using the tag.
<img src="image URL" alt="Smiley face" width="42" height="42">
Adding Buttons
With the <button> tag you can add a button to your web page.
To learn more about HTML and CSS commands, visit w3schools.
Comments (24)
Hi, my name Nur Ahmad. You can call me Wiwid like others.
I try your code to build the web server inside the esp, i think this code unique. because use String HTML to create the Web Server.
I had try code with Client.println() to build the web server like Github share what they did.
But, your code not give feedback when client connect to ur server.
And i combine both, the coe from Github and your code to build script that give feedback when client connect to your server.
But, combination not working. Because different style script when build the HTML web server
with your style script , can you help me to script ESP32 to give feedback when client connect to our server?
thank you
Hi Wiwid.
We will check it 🙂
Very interesting! Now. as a newbie, my question is related to:
Click Me! …
is there a way to send a digitalWrite command to the ESP32 board when the button is clicked?
Thanks in advance 🙂
Hi Antonio. It’s very easy to do that. Follow this link.
https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
Hello
I’m not able to insert the images, do you have any examples that can help me? I used the same code from the reference above and inserted a line of code for the image I want, but it doesn’t work, can you help me?
In the code
img src="image URL", you should replace “image URL” with a real valid image URL. This one should work:https://electropeak.com/learn/wp-content/uploads/2019/07/webserver-cover-400x300-1.jpgThanks for the examples. I found that the AP mode required me to set a manual IP address. The line:
WiFi.softAPConfig(local_ip, gateway, subnet);
Seems to disable DHCP. Commenting it out allowed DHCP to work, but I had to add the lines:
Serial.print(“My IP address: “);
Serial.print(WiFi.softAPIP());
To confirm what IP Address the ESP32 gave itself
Thanks for sharing.
Hello, thats a great example but I’ve one question? Where I can find the libary “WebServer.h”? I’ve tried to find in web but I’ve no access. Is it a standard libary, if yes what the name in the libary manager?
Thanks, Marcel.
Hi Marcel K. “WebServer.h” will automatically install when you install esp32 on Arduino IDE. If not, follow the link below to install it again.
https://electropeak.com/learn/getting-started-with-the-esp32/
I hope this tutorial helps you to install it.
Is it possible to have a files repo stored on the board so that I can host an existing webpage? (HTML, CSS and some images) Or maybe link the file tree to the board? Thanks in advance!
Yes, it’s possible. You can do that based on the tutorial explained in this article. But in order to make a public webpage, you will need static IP and config your rooter/modem.
An execllent posting from you, all helpful in stuffing my head
up with helpful knowledge. I’ve also taken the time to
share this on Twitter 🙂
You’re most welcome! And thanks for sharing.
Your website has provided me a lot of useful info, and for that I thank you very much.
This informative article is one of the best I’ve read up to now on your
web site, so I felt I needed to take the time to comment.
You have given myself a variety of tips to help me in the foreseeable future.
You’re most welcome! We’re filled up with energy by such motivating comments.
I’m having a problem after uploading the code in the board.
It says: “leaving… Hard resetting via RTS pin”
what should I do?
I’m connecting the esp32 directly at the USB of my computer, with no resistance and stuff.
I’m trying to make the web server to work, with ssid and password filled correctly.
Thanks for the explaining, it was pretty good.
Hi Vinicius,
You’ve got no problem actually! This message means that the uploading has been successfully done.
I see… thanks for the information. One more thing: Is it normal that the serial monitor is completely empty? It is completely white… and i can’t access the server even with my correct ip address.
Wow! It worked! I just had to press the RTS button to the module run the uploades code.
Thanks a lot Mehran! Have a nice life!
You’re quite welcome!
You too!
very intersting
Thanks!🙏
hi..
it is amazing
but i have a question please
how can i handle Input Fields with webserver.h esp32? and reading query parameters in url?
is there a clear documents for webserver ?
and thank you so much