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.
ngrok not recognized in command window …
Hi
these instructions are for windows
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?
Can I access two ESP 32 boards with one Authtoken ???
Fo Ngrok service, it is not possible to access without autotoken
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 !
Hi Yannick, I think you need to purchase your own domain and hosting to achieve this function. I will try to post an article on it as soon as possibe.
Have you post the article yet?
is that mean that’s my pc is the host in ngrok ??
what if i shutdown my pc is the server stop?
thanks
Hello. When running the command in dos I Get: ngrok not recognized in command window.
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
Hi it didn’t let me type in ngrok I am on mac
Hi,
Please check here:
https://gist.github.com/wosephjeber/aa174fb851dfe87e644e
Hi,
When trying to access the website ngrok URL I get a blank website,
would appreciate advice regarding this thanks.
Andre
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
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
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.