Ngrok: Exposing local server on the internet

bilalulhaque

Bilal Ul Haque

Posted on March 19, 2024

Ngrok: Exposing local server on the internet

Have you ever wanted to expose your local server to the internet for development purposes in a simple way? The answer is probably yes. I faced the exact same issue when I needed to expose my local server. Today, I’m going to discuss one of the solutions that caught my attention and is easy to use. First of all, let me briefly explain my problem.

As a Backend Engineer. I was working on a product that involved integration of payment gateways like Stripe, PayPal, etc. As some of you may know, we need to listen to webhooks to trigger various events in our application based on the events sent by the webhook. The main issue occurred was that the project was still in development phase and the payment gateway webhook couldn’t access the local server as it requires a public HTTPS URL. That’s when I had to use ngrok to expose my local webserver to the internet allowing the local server to listen to the events sent via the webhook.

Understanding WebHooks:

Webhook is a mechanism that allows one application to send real-time data to another when a specific event occurs. This asynchronous communication is useful for scenarios where immediate updates or responses are needed, such as in chat apps, payment gateways, etc.

Webhooks operate on a simple principle that when an event happens in the source application, it sends an HTTP POST request to a predefined URL in the destination application. This URL is often called the “callback URL” or “endpoint.” The destination application then processes the incoming data and executes the necessary actions.

What is Ngrok?

Ngrok is a multi-platform tunnelling tool that creates secure tunnels to localhost, making local servers accessible from the internet. It simplifies the process of exposing local services, such as web servers, to external networks, enabling developers to test and interact with webhooks in a real-world environment.

Architecture diagram

Key Features of Ngrok:

  1. Secure Tunnelling: Establishes secure tunnels using HTTPS, ensuring that data transferred between the local server and external services is encrypted.
  2. Port Forwarding: Allows developers to expose specific local ports, redirecting incoming requests to the corresponding services.
  3. Public URLs: It generates public URLs for the exposed local servers, eliminating the need for a public IP address or domain name.
  4. Inspection and Replay: Offers a web-based interface for developers to inspect HTTP traffic and replay requests. This feature is particularly useful for debugging and analysing webhook payloads.
  5. Authentication and Access Control: Enables developers to add authentication to their tunnels, ensuring that only authorized users can access the exposed services.
  6. Custom Subdomains: By providing the option to use custom subdomains for the public URLs, it adds flexibility to the testing environment.

Ngrok Use Cases:

  • Web Development: Allows to make your local server accessible via a public URL, so that any device from any location can access it.
  • Webhooks Testing: Most of our application relies on webhooks to receive data or events from external services. Ngrok enables the exposure of your local server to the internet, allowing the application to listen to incoming webhook endpoints.
  • Demonstration Purposes: It gives a temporary public URL, which enables us to showcase local development environment for demonstrations.

Conclusion:

Ngrok serves as a powerful tool for simplifying webhook development and testing. Its ability to create secure tunnels, generate public URLs, and provide advanced features makes it an amazing resource for developers working on applications that require real-time communication.
Integrating Ngrok into your development process streamlines the process of exposing local servers, testing webhooks, and debugging applications.

💖 💪 🙅 🚩
bilalulhaque
Bilal Ul Haque

Posted on March 19, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related