What is Ngrok and how does it work?

Localhost tunneling is no longer a daunting task today, thanks to Ngrok. Developers and testers can now access the local web servers, making it easy to share, test and debug web applications with others.

But how does Ngrok make this happen? In this article, we will explore and dive deep into the internal mechanism of Ngrok and understand how it works.

What is Ngrok?

First, a quick refresher on what Ngrok actually is.

Ngrok is a cross-platform application that allows developers to expose their local web servers to the internet. It hosts a local web server on its own sub-domain and makes your local development box available on the internet through Tunnelling.

Use Cases of Ngrok

Ngrok is a great tool when it comes to testing local applications as if they were hosted on a server. You can use it to test applications in collaboration with other developers or testers, users and stakeholders without having to deploy your application to an environment.

For instance, let’s say you have a front-end web app in React. Now you want other developers to be able to see your React app in your development environment. You can use Ngrok to generate a public URL for your local web server. Then, other developers can see your React app in a development environment.

To demonstrate, here I have a React app running locally on port 3000, as shown below:

And I simply run the command ngrok HTTP 3000 to tunnel my React app:

And now anyone can visit my local React app using the tunnel URL ngrok generated for me:

That’s literally how easy it is actually to start using Ngrok. Additionally, you can also use Ngrok to test webhooks.

Let’s say you want to build a Slack application. Slack will need to send events to your application via webhooks. However, since you’re developing locally, Slack won’t be able to provide a webhook to your local development server. With Ngrok, you can generate a URL that maps to your local server, and Slack can now send you webhooks on this URL. Therefore, you can easily test your Slack application with events from Slack in real time when in development mode using Ngrok.

Internet Architecture and Ngrok

Let's delve into the intricacies of Ngrok. To comprehend Ngrok's operation, we must initially comprehend the internet architecture that oversees it.

The internet works on the end-to-end principle, where any machine can act as a server or a client. Each device has a unique IP address, but device IP addresses are private. Your router, on the other hand, has a public IP address that your devices use to communicate with websites over the internet. This is how websites interact with your machine when it’s a client requesting resources from different machines on the internet. Here’s a visual representation of this architecture:

Now when you run a local development server, your own device is a server, but it’s not on the internet. Remember your device has a private IP address that any other device cannot access. So there’s no direct mechanism for another device to access a local development server running on your own machine.  Thus for anyone to make a request to your local server, they need your private IP address. Now routers don’t just expose private IP addresses for security reasons. This is where Ngrok comes in. It maps your local development server to its own server.

So now, if someone needs to access your local development server, they make a request to Ngrok’s server. Ngrok’s server has a public IP address that anyone can access over the internet.

So how, the question is, how does Ngrok achieve this behavior? How does Ngrok map a local development server to its own server? Let’s find out.

How does Ngrok Work?

When you use Ngrok, you start it on your local machine and specify the port number of the local server that you want to expose. When you do that, Ngrok creates a secure tunnel to a public endpoint (a ngrok.io URL) that is accessible over the internet.

So now, all the traffic to the public endpoint is forwarded as a request to the local server running on your machine. Your local server responds back to this request or traffic back to this public endpoint. This is also called port forwarding or localhost tunneling. This is the underlying principle through which Ngrok maps your local development server to one of its own servers, making it seem like it’s just your local development server hosted somewhere.

Ngrok creates a secure connection between the public endpoint and your local machine so that traffic is encrypted and secure. When the request arrives at the public endpoint, it is encrypted and forwarded to your local server. Ngrok uses a combination of cryptography and network routing techniques to create a secure and reliable connection between the public endpoint and your local machine. Thus Ngrok allows you to tunnel your local server easily while ensuring that the security is intact.

Challenges with Ngrok

While Ngrok is an extremely helpful tool, like any other software tool out there, it’s not perfect. There are some challenges with using Ngrok that you should be aware of:

1. Security Risks: Because Ngrok maps your local server to its own server, there is a potential security risk of sensitive data is being transmitted.
2. Reliability Issues and lack of seamless experience: Loading a web app through tunneling will slow down your tunneled URL since every request itself is tunneled through another server. On top of that, using Ngrok with dropped connections or slow speeds can further slow down your tunneled URL. This can be frustrating when testing your websites or application.
3. Dependency on Third-Party Service: Since Ngrok relies on a third-party service, there is always the risk of downtime or service disruptions. This can impact your ability to work on your project or share it with others.
4. Limited Customization: While Ngrok offers some customization options, they are somewhat limited. This can be frustrating if you're looking for more fine-grained control over your server mapping.
5. Limited Free Plan: The free version of Ngrok only allows for a limited number of connections per minute and doesn't include advanced features like custom domains. This can be a limitation for larger projects or teams.

Conclusion

We’ve learned how Ngrok works internally by understanding the concept of port-forwarding and localhost tunneling. Ngrok is an extremely helpful tool for developers, especially for testing and debugging purpose in various types of applications.

‍