How to Create a Webserver with Arduino
You can create a simple web server using the Arduino IDE and the D1 Mini board. If you’re not familiar with the D1 Mini, you can read our guide here: A Guide to IoT Magic with the ESP8266. The ESP8266 is a Wi-Fi board that gives our Arduino projects the ability to connect to the internet. In this guide we will be creating a simple webserver to serve a basic webpage.
Basic Webserver Code Example:
Here is a basic example of how to create a webserver with Arduino.
The most important thing to remember here is to replace "Your_SSID" and "Your_PASSWORD" with your own Wi-Fi network credentials.
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> const char* ssid = "Your_SSID"; const char* password = "Your_PASSWORD"; ESP8266WebServer server(80); void setup() { Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); Serial.print("IP Address: "); Serial.println(WiFi.localIP()); server.on("/", HTTP_GET, []() { server.send(200, "text/html", "Hello, World!"); }); server.begin(); } void loop() { server.handleClient(); }
Testing:
Using the code above you can test if everything works correctly.
- Open the Serial Monitor (Tools > Serial Monitor) to view the serial output.
- Once the NodeMCU is connected to your Wi-Fi network, it will display its IP address.
- Open a web browser and enter the IP address (e.g.,
http://192.168.1.100) to access the web server. You should see “Hello, World!” displayed in your browser.
Let's Build!
Arduino Webserver
Now we have covered the basics, let’s build a slightly more interesting webpage to give you an idea of what can be achieved with this project.
The Code:
Remember to replace "Your_SSID" and "Your_PASSWORD" with your own Wi-Fi network credentials.
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#ifndef STASSID
#define STASSID "YOUR_SSID" //ENTER YOUR NETWORK SSID HERE
#define STAPSK "YOUR_SSID_PASSWORD" //ENTER YOUR PASSWORD HERE
#endif
const char *ssid = STASSID;
const char *password = STAPSK;
ESP8266WebServer server(80);
//************ HTML CODE SECTION STARTS HERE ************
const char website[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='refresh' content='20'/>
<title>ESP8266 Webserver</title>
<style>
header{
font-size:60px;
}
body {
background-image:url("https://wallpapercave.com/wp/wp2163541.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: absolute;
font-size:30px;
Color: black;
text-align:center;
}
footer{
position:absolute;
left:36%;
bottom:20px;
font-size:25px;
}
</style>
</head>
<header>Arduino Webserver</header>
<body>
<p>
This is a simple webserver created with Arduino
</p>
</body>
<footer>We Love Arduino!</footer>
</html>
)=====";//************ HTML CODE SECTION ENDS HERE ************
void handleRoot() {
char temp[400];
server.send(200, "text/html", website);
}
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup(void) {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
while (WiFi.status() != WL_CONNECTED) { // Waiting for connection
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot);
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
server.handleClient();
MDNS.update();
}Copy and paste the code above to a new sketch in your IDE and then upload the code to your ESP8266 D1 Mini. If all went well, it will have connected the network and is now serving the webpage that’s shown below.
If you need help finding the network assigned IP address for the D1-mini, you can either log into your router or use a network mapper app like “Fing”. Fing is an app I use on my iPhone; it scans a network and discovers all devices connected to the network and displays their IP.
Once you have discovered the IP address of the D1-mini, enter the IP into an internet browser address bar that is connected to the same network.
HTML and CSS
Here’s a quick explanation of HTML and CSS:
HTML (Hypertext Markup Language):
- HTML is a markup language used for creating the structure and content of web pages.
- It consists of a series of elements or tags that define the different parts of a web page, such as headings, paragraphs, links, images, and forms.
- HTML elements are enclosed in angle brackets, and most have opening and closing tags (e.g.,
<p>for paragraphs). - HTML provides the basic structure and semantic meaning to web content.
CSS (Cascading Style Sheets):
- CSS is a stylesheet language used for controlling the presentation and layout of web pages.
- It allows you to define the visual appearance of HTML elements, such as their colors, fonts, sizes, margins, and positioning.
- CSS rules consist of selectors (identifying which HTML elements to style) and declarations (specifying the styles to apply).
- CSS helps separate the content (HTML) from its presentation (styling), making it easier to maintain and style web pages consistently.
In summary, HTML defines the structure and content of a web page, while CSS is used to style and control the appearance of those elements. Together, they enable the creation of visually appealing and well-structured web pages.
Conclusion
Creating a web server with Arduino, powered by boards like the D1 Mini, opens up a world of possibilities for building interactive and remotely accessible projects. Whether you’re monitoring sensors, controlling devices, or displaying information over the web, this technology empowers you to bridge the digital and physical worlds effortlessly. With the knowledge gained from this project, you’re well on your way to exploring the exciting realm of IoT and web-based applications. So, get ready to unleash your creativity and embark on a journey of endless innovation with Arduino web servers!
Recommendations:
The Elegoo Super Starter Kit
If you don’t already own any Arduino hardware, we highly recommend this kit as it has everything you need to start programming with Arduino. You can find out more about this kit, including a list of its components here: Elegoo Super Starter Kit
You can find this kit on Amazon here: Elegoo Super Starter Kit
The 0.96-inch Mini-OLED Display
We highly recommend this mini-OLED bundle of five 0.96-inch OLED displays. We have bought these before and they all worked perfectly. You can read more about the mini-OLED here: Mini-OLED
You can find this bundle on Amazon here: OLED Displays
Elegoo Nano (Arduino Compatible)
We have bought these Nano boards many times and can highly recommend them. There are three Nano boards in this pack making them a total bargain for everyone.
You can find this pack on Amazon here: Arduino Nano
ESP8266 D1-Mini
D1-Mini is an Arduino compatible Wi-Fi board based on an ESP-8266-12F. This WLAN board has 9 digital I/O pins.
You can find this board on Amazon here: D1-Mini
