![Create A Web Server w/ ESP32 [Tutorial]](https://prod.hackster-cdn.online/assets/transparent-a0c1e3063bcabc548a5f3fa7328f3c1c97f747e6e764da4c14439567baa79ae1.gif)
![Create A Web Server w/ ESP32 [Tutorial]](https://hackster.imgix.net/uploads/attachments/1081641/_vFTh61OQoD.blob?auto=compress%2Cformat&w=900&h=675&fit=min)
Hardware components | ||||||
| × | 1 | ||||
Software apps and online services | ||||||
 |
| |||||
In this 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
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
In this case, the ESP32 module is connected to the Wi-Fi router as a Client and can access the Internet through the router.
To start the ESP32 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
https://electropeak.com/learn
*/
#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.
NoteYour PC (your browser source) should be connected to the same router as the ESP32
#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"); The above code print the “.” carachter on the serial monitor until the ESP32 is connected to the Wi-Fi router. When the connection is established correctly, “WiFi connected successfully” is displayed on the serial monitor.
Serial.print("Got IP: ");
Serial.println(WiFi.localIP()); Then the IP address of ESP32 will be printed on the serial monitor.
To manage HTTP requests and specify what part of the code to run when a URL address is searched, the on method is used.
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.
TipTo write a command in a few lines, just add a backslash (\) at the end of each line.
2345
void handle_root() { server.send(200, "text/html", HTML); } The handle_root unction is called whenever the main path (the IP address) is searched in the browser. In this function, the send method is used.
The send command sends the code number 200 (that means the page is opened correctly), along with the HTML code we wrote, to display it on the web page.
For more examples, you can see the library examples.
Setting up ESP32 in Access Point Mode (AP)In this case, ESP32 acts as a router and creates a local wifi network with the desired name and password. Since there is a limited number of devices that can connect to this connection point, it is also referred to as the Soft Access Point.
Upload the following code on your board to set up the ESP32 in the AP mode.
/*
ESP32 Web Server - AP Mode
modified on 25 MAy 2019
by Mohammadreza Akbari @ Electropeak
https://electropeak.com/learn
*/
#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);
} Connect to the connection point you made once you’ve uploaded the code.
Now enter the 192.168.1.1 IP in your browser.
const char* ssid = "Electropeak";
const char* password = "123456789"; In this section, you should enter an arbitrary SSID and password so that the ESP32 creates a Wi-Fi connection point with that name.
IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0); Then you need to enter your IP to create the network. (You can use the same IPs that are defined in the code.)
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);The above commands create a Wi-Fi connection point.
The rest of the code is the same as STA.
HTML and CSS Basic CommandsHTML 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> Should be written Immediately after <!DOCTYPE html>. All the codes are placed between this tag.
<html> codes… <\html> Inserting Headlines
You can use the tags <h1> to <h6> to create headlines in different sizes.
<h1>This is heading 1</h1> Inserting Paragraphs
Use the <p> 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 <strong> HTML tag or the <b> CSS command to bold the texts.
<b>This is bold text</b>Italic Texts
You can use the <em> HTML tag or the CSS command <i> to write the posts in italic font.
<i>This is Italic text</i>Adding a Link
With the <a> 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 <img> 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.
<button type=”button” onclick=”alert(‘Hello world!’)”>Click Me!</button>To learn more about HTML and CSS commands, visit w3schools.
Comments