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. accessing ESP32 web server from anywhere in the world esp8266

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.

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.accessing ESP32 web server from anywhere in the world
  • 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. ngrok esp32
  • 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.
  • ngrok esp32 token
  • 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.ngrok application
  • 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: ngrok 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. ngrok command window
  • 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.ngrok tunnel url
  • 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.

17 thoughts on “Accessing ESP32 web server from anywhere in the world ( ESP8266 compatible)”

  1. Can Raspberry Pi running Ngrok service be accessed from the remote location too? What if Raspberry Pi restarts because of power outage? Is there a way to avoid using Raspberry Pi and run everything on ESP32?

    Reply
  2. That is of course a great solution but is there any way you could connect your ESP32 directly to ngrok or another tunnel service to access the live video feed ? Using a raspberry pi for that isn’t the most convenient solution !

    Reply
  3. I can’t get the download file to unzip. I downloaded the file twice. I tried winrar and winzip both tell me that the archive is invalid (in so many words). I am running windows 10 64 bit.
    Any ideas on what I need to do?

    Thanks, Dan

    Reply
  4. Hi,

    When trying to access the website ngrok URL I get a blank website,
    would appreciate advice regarding this thanks.

    Andre

    Reply
  5. i have custom domain from ngrok i want to use it with my esp32 + rasberry pi webserver. how can i configure so that i can be able to link my esp32 ip address with domain!? thank you

    Reply
  6. Hi.

    This is a nice project. Thank you so much.
    I successfully repeated the project. It worked perfectly.

    Could do you please improve it by making accessible from anywhere over the internet?

    It could help me since it is a part of my academic project.
    Thanks in advance

    Reply
  7. Hi.
    Thank you for the helpful tutorial. But i have a question, what if i use https server in my esp-idf project, the port number in this case is 443 not 80.

    Reply

Leave a Comment