Accessing ESP32 web server from anywhere in the world ( ESP8266 compatible)

This tutorial is about accessing the ESP32 web server from anywhere in the world, and this tutorial is also compatible with the ESP8266 development board. You can use the same instruction for ESP8266 also. When you make the Web server using ESP32 or ESP8266, you usually access it using the IP address through the local area network. What if you want to access your web server from anywhere in the world? You must be asking yourself either it is possible or not to access the web server from any location in the world using the same IP address. So the answer is yes we can access it using a third party service which will route ESP32 or ESP8266 IP address from local area network to be accessible anywhere over the internet. I will show you in a few minutes how to do it.

If you are using ESP32 web server to monitor your home device and other sensors data, you can access this Web server only, if you are connected to the same network to which ESP32 or ESP8266 is connected.  If you are outside home and want to access the web server, you will not be able to access it until you have not implemented this guide. Without any delay, now let’s get started with this tutorial.

First of all, in this tutorial, I am not going to explain how to create a web server with ESP32. Because this tutorial is about Accessing ESP32 web server from anywhere in the world, you can check our already posted tutorials on how to make a web server with ESP32.

• Create a simple ESP32 Web Server to control LEDs from a web page
• Monitoring DHT11 and DHT22 sensors values on the Web server with ESP32 
• Password protected Web server with ESP32 in Arduino IDE 

Accessing ESP32 web server from anywhere

Now follow these steps to turn your web page accessible from any location. This method will only work if your computer is always on. But you can use a low-cost raspberry pi or BeagleBone board to run this software.

• First, you need to upload code given below to ESP32 board and get the IP address of ESP32 web server.
• you also need to change the port number to any number other 80. Because in all previous ESP32 web server project, we have used port number 80.
• We are using ngrok service to make web server accessible from anywhere and ngrok will not work if you use port 80. I do not know the reason behind it. So, we recommend you to use a port number other than 80. you can use 8888.  Make the changes in this line:

WiFiServer server(8888);   // Use port number 8888 instead 80

• Now copy this code and upload it to ESP32 using Arduino IDE.

#include <WiFi.h>

const char* ssid = "PTCL-BB";  
const char* password = "5387c614";

WiFiServer server(8888);
String header;


void setup() {
  Serial.begin(115200);
  
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients
  
    if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) 
    {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE html>\n");
client.println("<html>\n");
client.println("<body>\n");
client.println("<center>\n");
client.println("<h1 style=\"color:blue;\">ESP32 webserver</h1>\n");
client.println("<h2 style=\"color:green;\">Hello World Web Sever</h2>\n");
client.println("<h2 style=\"color:blue;\">Password protected Web server</h2>\n");
client.println("</center>\n");
client.println("</body>\n");
client.println("</html>");
break;
           
            
          } 
          else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

• After uploading this code, get the IP address from the serial monitor.
• Now go to any web browser and type this.

http://IP_ADDRESS:8888

• You will be able to access the Web server if you have entered the IP address and port number correctly.
• Now let’s add the feature of worldwide accessibility.

Using ngrok tunnel service

• You can use a free service known as ngrok which is used as a tunnel to create this feature.
• Go to this link and make your account using your email address.  Fill the required details and click on the signup button. 
• After signing up for the account, go to your email address and activate your account by clicking on the activation link.
• Now login to your account and click on the ‘Auth’ button’ to get your Tunnel Authtoken as shown in the figure below. Copy this Tunnel Authtoken, we will need it later on.
• 
• Now click on download button and download this software according to the operating system you are using.
• After you have done with downloading, you will get a compressed folder. UnZip it using any software.
• Now double click on a ngrok icon to open it.
• If you are using Linux, you can type this command ./ngrok –help in Linux command line to open this software
• After opening this application, you will see this windows command line:
• Now enter this line in windows terminal and replace IP_ADDRESS with your ESP32 IP address and TUNNEL_AUTHTOKEN with your ngrok authentication code which we noted in last steps.

ngrok tcp IP_ADDRESS:8888 --authtoken TUNNEL_AUTHTOKEN

• After adding my ESP32 IP address and Tunnel token it is how it looks.

ngrok tcp 1192.168.10.24:8888 --authtoken 5evLhQwWv7zFgA6MFxDsx_69irPYp4BT3r3sKmqsLkz

• This is where you need to paste this command and hit enter.
• After you hit the enter button, you will see this window. This window shows the tunnel URL as highlighted in this picture. we will use this URL to access the web server instead of an IP address.
• Now you can copy this URL and note it down. You can access the web server from anywhere in the world using this URL.
• if you see the URL it is of TCP type tcp://0.tcp.ngrok.io:15533 but you can replace TCP with HTTP and enter the URL in any web browser, you will be able to access the web server.

I hope that you should have got a useful knowledge after reading this guide. you may want to read our other useful ESP32 related lessons.

• Password protected ESP32 Web server
• DHT11/DHT22 interfacing with ESP32
• BMP180 pressure sensor based web server using ESP32
• Fix/Static IP address for ESP32
• Controlling Servo motor with ESP32 Web server