How to connect your LocalHost to the Internet using Ngrok

While working on an app in development, I wanted to test it online—but I wasn’t ready to fully host it since it was still in the early stages. I needed a way to make my localhost accessible over the internet, just for testing purposes. After a lot of research (and trial and error), I finally discovered a tool called Ngrok that made it easy to connect my local environment online, without any complicated setup or full deployment.

In this post, I’ll walk you through how I set this up with ngrok so that if you find yourself in the same situation, you’ll have a clear path to testing your app online in no time. Let’s dive into how ngrok can make your development process smoother!

Ngrok is a developer tool that provides a secure tunnel from your LocalHost (your local development environment) to the internet. It creates a temporary, public URL that directs to your local server, allowing you to share your in-progress application with anyone online. This can be incredibly helpful when you want to test, demo, or get feedback on an app without fully deploying it to a web host.

Step 1: Download and Install ngrok

To get started, you’ll need to download ngrok.

Windows:

• Go to your command line terminal and write the following

    choco install ngrok
  

  OR

• Head over to download ngrok and select the version that matches your Windows OS. Click on Download ZIP File to download the zip package. Once downloaded, unzip the file to get started with the installation.

Mac OS:

• Go to your command line terminal and write the following

    brew install ngrok/ngrok/ngrok
  

  OR

• Head over to download ngrok and select the version that matches your MacOS. Click on Download ZIP File to download the zip package.

• Once downloaded, unzip the downloaded file, then move the ngrok binary to a directory in your PATH (e.g., /usr/local/bin) by running:

    mv /path/to/ngrok /usr/local/bin
  

Linux:

• Go to your command line terminal and install ngrok via Apt

    curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok
  

  OR

• Go to your command line terminal and install ngrok via snap

    snap install ngrok
  

  OR

• Head over to download ngrok and select the version that matches your Linux OS. Click on Download ZIP File to download the zip package.

• Once downloaded, unzip the downloaded file from the terminal using:

    sudo tar xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin
  

Step 2: Sign Up for an ngrok Account

Ngrok requires a free account to generate secure tunnels, so head over to ngrok’s signup page and create an account. Once logged in, navigate to Your Authtoken in the dashboard—this is a unique token for your account that you’ll need to set up ngrok securely.

To add your auth token, open your terminal and run:

ngrok config add-authtoken YOUR_AUTH_TOKEN

(Be sure to replace YOUR_AUTH_TOKEN with your actual token from the ngrok dashboard.)

With ngrok installed and your account set up, you’re now ready to connect your localhost to the internet! In the next step, we’ll dive into how to start a secure tunnel to your app.

Step 3: Create a Secure Tunnel to your Local Server

With ngrok installed and your authentication token configured, you’re now ready to create a secure tunnel to your local server. To start your local server, make sure that you run your app. This opens the app on http://localhost:<port_number> e.g http://localhost:3000

Then, open your terminal (or command prompt) and run the following command:

ngrok http http://localhost:3000

If your app runs on port 8080, replace 3000 with the port number on which your app is running. For example, you’d type:

ngrok http http://localhost:8080

Once you run the command, Ngrok will generate a temporary public URL for your app, which will look something like this: https://RANDOMSTRING.ngrok.io

This URL is accessible from anywhere on the internet, allowing you to test your app on different devices or share it with teammates for feedback. ngrok provides both HTTP and HTTPS versions of the URL, so you can choose whichever is suitable for your testing needs.

With this public link, you’re now ready to test your localhost app as if it’s live online! In the next step, we’ll explore how to monitor and debug your app using ngrok’s web interface.

Step 4: Monitoring and Debugging with the ngrok Dashboard

One of ngrok’s most powerful features is its web interface, known as the ngrok Dashboard. When you start a tunnel, ngrok automatically opens a dashboard at http://127.0.0.1:4040. This local dashboard gives you real-time insights into the traffic that’s going through your tunnel, making it incredibly useful for testing and debugging.

What You Can See on the ngrok Dashboard

The dashboard shows a detailed log of every request that passes through the ngrok tunnel. For each request, you can view:

• Request Headers: See information like user agents, content types, and any custom headers your app might be expecting.

• Request Body: This is especially useful when testing form submissions or API endpoints, as it shows the exact data being sent to your server.

• Response Status: ngrok displays the HTTP status code (like 200 OK or 404 Not Found) and response body, helping you ensure your app is responding as expected.

Why This is Helpful for Debugging

The ngrok Dashboard is perfect for troubleshooting and testing various aspects of your app:

• API Testing: If you’re working with API endpoints, you can easily see if requests are reaching your server, and confirm that responses are formatted correctly.

• Webhook Testing: ngrok’s request logging is particularly useful when working with webhooks from third-party services (like Stripe or GitHub), as you can verify each step in the request and response cycle.

• General Debugging: If something isn’t working as expected, you can quickly inspect headers, data payloads, and response codes without adding extra logging in your code.

Using the ngrok Dashboard is a simple way to gain deep visibility into your app’s behavior, making it a go-to tool for efficient debugging while developing.

Step 5: Closing the ngrok Tunnel

Once you’re done testing or sharing your app, you’ll want to close the Ngrok tunnel that you created in Step 3 to end the connection. In your terminal or command prompt, simply press Ctrl + C to stop Ngrok. This will immediately deactivate the public URL, ensuring your localhost is no longer accessible online.

If you want to restart the tunnel later, you can always rerun the ngrok http <port_number> e.g ngrok http 3000 command.

Testing your app online while it’s still in development can be a game-changer, and Ngrok makes it simple, secure, and quick. With just a few steps, you can share your localhost with others, test webhooks, and troubleshoot API responses in real-time—all without deploying to a live server.

Ngrok has been a huge help in my development process, and I hope this guide makes it just as easy for you. Next time you need to share or test an app in development, you’ll be ready to go live in seconds. Happy coding, and here’s to smoother testing!

Copyright to Cover image: https://images.app.goo.gl/CJzV3dpRMTNd1kwp7