ESP32 soft access point web server in Arduino IDE

In this ESP32 Web server tutorial, you will talk about how to set ESP32 as a soft access point web server or How to use ESP32 in soft AP. In all previous projects on the ESP32 web server, we use ESP32 as in station mode. We will not need to connect ESP32 development board with WiFi network through a router. However, ESP32 will itself work as a router. It will serve as a WiFi network.

ESP32 can be used in station mode, soft access point mode, or in both modes.  In the last tutorial ( See this tutorial on creating ESP32 web server), we use ESP32 in station mode where we connected it with a WiFi router and it gets the IP address from a WiFi router. In this mode, the router acts as a soft access point because all web client gets web pages through the wireless router as shown in the figure below.

ESP32 in station mode through router as soft access point

But, this method has one limitation.  If you do not have WiFi router available, you can not use ESP32 as a web server to access data through a local network.  The solution to this query is a soft access point method. So let’s see what is soft access point mode and how to set this board in soft AP mode.

ESP32 in a Soft Access Point Mode

The simple meaning of soft access point is a hotspot. We can turn ESP32 into a hotspot device. Every hotspot device acts like a router which we used to transfer data between devices. Any laptop and mobile device having WiFi built-in can connect to this hotspot. Similarly, We can set ESP32 acts like a WiFi router and computing devices can connect to it. As shown in the picture below, ESP32 acts as a soft access point and devices can connect to it through WiFi name and password.

ESP32 soft access point web server in Arduino IDE

In summary,

  • When you use ESP32 in soft access point mode, it builds its own WiFi network.
  • All devices within the range of this WiFi network can connect to it ( using this network name and password).
  • All devices connected to it will act as a station and ESP32 as a soft access point.
  • We will see in coming section how to set SSID and password of this WiFi network created by this board.
  • You will not need to connect your board with any router or wired network.

Connecting LEDs to ESP32 Board

For illustration purpose, we will control two LEDs from a web page. The connection diagram is shown below. In this connection diagram, we used three LEDs. We will control these LEDs from a web page. GPIO pin 22, 23 and 15 will be controlled.  Now make this circuit diagram on a breadboard.

ESP32 web server controlling LEDs circuit diagram

Followings background knowledge is essential for this tutorial:

ESP32 Soft Access point Code in Arduino IDE

In this code, we will control the three LEDs as shown in the connection diagram given above.  But the instructions given in this example are also compatible with other ESP32 web servers. Now copy this sketch and upload it to ESP32 using Arduino IDE.  This code sets the ESP32 in soft access point mode.

#include "WiFi.h"
#define LED0 23
#define LED1 22
const char* ssid = "ESP32-Soft-accessPoint";
const char* password = "microcontrollerslab";
WiFiServer server(80);
String html ="<!DOCTYPE html> \
<html> \
<body> \
<center><h1>ESP32 Soft access point</h1></center> \
<center><h2>Web Server</h2></center> \
<form> \
<button name=\"LED0\" button style=\"color:green\" value=\"ON\" type=\"submit\">LED0 ON</button> \
<button name=\"LED0\" button style=\"color=red\" value=\"OFF\" type=\"submit\">LED0 OFF</button><br><br> \
<button name=\"LED1\" button style=\"color:green\" value=\"ON\" type=\"submit\">LED1 ON</button> \
<button name=\"LED1\" button style=\"color:red\" value=\"OFF\" type=\"submit\">LED1 OFF</button> \
</form> \
</body> \
</html>";


void Connect_WiFi()
{
WiFi.begin(ssid, password);
while(WiFi.status() != WL_CONNECTED)
{
delay(100);
}
}

void setup()
{
Serial.begin(115200);
pinMode(LED0, OUTPUT);
pinMode(LED1, OUTPUT);
digitalWrite(LED0, LOW);
digitalWrite(LED1, LOW);
Serial.print("Setting soft access point mode");
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.begin();
}


void loop()
{
WiFiClient client=server.available();
if(client)
{
String request = client.readStringUntil('\r');
if(request.indexOf("LED0=ON") != -1)digitalWrite(LED0, HIGH);
if(request.indexOf("LED0=OFF") != -1)digitalWrite(LED0, LOW);
if(request.indexOf("LED1=ON") != -1)digitalWrite(LED1, HIGH);
if(request.indexOf("LED1=OFF") != -1)digitalWrite(LED1, LOW);
client.print(html);
request="";
}
}

Code used in this tutorial is almost identical as used in esp32 web server tutorial except the setting of a soft access point.  First, we need to define the SSID name and the password. Following lines set the name of ssid as “ESP32-Soft-accessPoint” and password as “microcontrollerslab”. You can replace the ssid and password to whatever value you want.

const char* ssid = "ESP32-Soft-accessPoint";
const char* password = "microcontrollerslab";

These lines established the access point mode with above-mentioned ssid and password. The Serial.print() function prints the string ” Setting soft access point mode” on a serial monitor.

Serial.print("Setting soft access point mode");

The WiFi.softAP() function used to set the soft AP mode with two arguments as an input to this function. One is the name of SSID which you want to set and another one is the password of WiFi network which will ESP32 create.

WiFi.softAP(ssid, password);

The WiFi.softAPIP() function is used to get the IP address of ESP32 through which we will access the web server. This line saves the IP address value in a variable ‘IPAddress’. After that Serial.print() function prints the value of IP of address on the serial monitor.

IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);

So these functions will set the ESP32 as soft AP. If you want to turn your any existing ESP32 based web server project into soft access point mode, you only need to add these lines to your code.

Accessing Web server from any device

Now upload this code to your board using Arduino IDE. After you see the message of done uploading in Arduino IDE, click on Serial monitor button to the serial monitor. you will see this message on the serial monitor. It will show your IP address. you need to note down this IP address. Because we will need it to access the web server. ESP32 soft access point web server IP address

How to connect to ESP32 Soft AP

Now, we will see how to connect to a WiFi network created by ESP32. Before doing so you should make sure you powered your board and uploaded the sketch successfully.

  • To connect to ESP32 soft AP, open your mobile device WiFi option and search for available WiFi networks. you will see the name of ssid which you have given in the code. ESP32 soft access point WIFI NETWORK
  • After that click on the WiFi option and enter the password which you set inside the sketch as shown in the picture. ESP32 soft access point password
  • Now click on the join button to connect to this WiFi network.
  • Once you connected with the WiFi of ESP32, now go to the web browser of your mobile device and search with the IP address you noted before. you will see this web page in the web browser. ESP32 soft access point serving web page
  • Now connect LEDs with ESP32 board and click on these buttons. you will be able to control LEDs connected with GPIO pins 22 and 23 through this web page.
  • You can also connect with this access point through a laptop or your computer. Go to the network setting of your computer, you will also see an “ESP32-Soft-accesspoint” WiFi option there. ESP32 soft access point web server connected to computer

So this is how we can easily convert the ESP32 to create a WiFi network of its own and can use to create a web server without using any wireless router.

We have a similar guide with MicroPython for ESP32 and ESP8266:

you may also like to check other ESP32 projects :

8 thoughts on “ESP32 soft access point web server in Arduino IDE”

  1. Hallo from Germany,
    thank you so much for your tutorial 🙂

    I have one question I can’t figure out:
    I build a smart control for my camper van. Basically its an Arduino controlling a relay block.

    Now I want to update to an esp32 to have the possibility to control the camper via smartphone and have the Data send to the html. ( Battery voltage for example)

    Everything works fine BUT 😀 I can’t figure out how to code a hardware switch additionally to the smartphone control using softap.

    Turn on lights turn off lights from smartphone is nice to have but I need the possibility to turn it on and off in the van using a hardware switch.

    Do you have any idea to find a solution for my problem?

    Thank you and stay healthy.

    – Johannes

    Reply
  2. If you don’t add a server response with a “200 – OK” message, the server will not work most (if not all) of the time. I see this mistake a lot.

    Add the lines below marked “Add this line” and the server responds perfectly.

    ———————————————————————————————
    if(client) {
    String request = client.readStringUntil(‘\r’);

    if(request.indexOf(“LED0=ON”) != -1)digitalWrite(LED0, HIGH);
    if(request.indexOf(“LED0=OFF”) != -1)digitalWrite(LED0, LOW);
    if(request.indexOf(“LED1=ON”) != -1)digitalWrite(LED1, HIGH);
    if(request.indexOf(“LED1=OFF”) != -1)digitalWrite(LED1, LOW);

    client.println(“HTTP/1.1 200 OK”); // add this line
    client.println(“Content-type:text/html”); // add this line
    client.println(“Connection: close”); // add this line
    client.println(); // add this line

    client.print(html);
    client.println(); // add this line
    request=””;
    }
    ———————————————————————————————

    Reply

Leave a Comment