DEV Community

Jose Godinez
Jose Godinez

Posted on

How to Run Ngrok to Test & Share Your Local Development

One traditional pain point in software development is the need to continuously redeploy work to a remote web server to test functionality, compatibility and share with collaborators. Maybe you need to show your team a quick demo of something you’ve been working on, or test webhook notifications with integrated third-party services. Traditional ways to make the necessary link up can be complex and time consuming - not suitable just for sharing or testing something quickly. Luckily, there is an easy plug-and-play solution available: Ngrok.

Ngrok is, in the words of its founder Alan Shreve, “a tunneling, reverse proxy that establishes secure tunnels from a public endpoint to a locally running network service while capturing all traffic for inspection and replay”. In other words, it’s a cross-platform utility that allows developers to expose a local development server to the internet with minimal fuss. This enables quick and easy testing of add-ons and webhooks directly from your local machine.

Image description

The basic function of Ngrok is to expose a local web server to the internet via a secure tunnel. The free version of the tool does this by generating a random URL hostname (like abcde123.Ngrok.com) that is connected to the internet and can route requests and notifications from third-party apps to your local machine. By default, Ngrok will forward both HTTP and HTTPS traffic to your local machine, so there are no problems when testing webhooks with third-party services that require SSL certificates, domain validation, etc.

Ngrok also provides a real-time web UI where you can track all of the HTTP traffic running over your tunnels. It has a web console for this that is easy to access in your browser by opening (http://localhost:4040). Through the console, you can inspect requests and responses, as well as replay API requests with a single click. This can help speed up iteration testing by saving you the work usually required to generate new requests.

Image description
We’ve written before about why Laravel is the go-to framework for many PHP developers. As a framework, it’s simple to use and offers a wide range of libraries, tools, and templates to help developers build complex and stable web applications. But developers usually work in teams, so they need to be able to share or present a demo of their local framework with colleagues. Enter Ngrok.

Ngrok and Laravel are a great fit for each other. As we’ve shown, Ngrok allows you to quickly create a tunnel for free and Laravel has an internal web server that can be used without configuration. As a developer, this makes it really easy to share your local Laravel framework with anyone that uses a browser.

To show you just how easy, here we explain in three steps how to run Ngrok on Mac/Windows/Linux and share your Laravel Framework Installation with anyone outside your network (Note: These steps assume you already have Laravel correctly installed on your local machine).

Download and Prepare Ngrok

First, download the Ngrok binary. Choose your OS (Mac, Windows or a Linux Distro).

Then locate the downloaded file, unzip it and move it to a place available on the PATH (you need sudo credentials). In Windows, you can unzip directly by clicking on the file.

unzip /path/to/ngrok.zip
sudo mv /path/to/ngrok /usr/local/bin/ 
Enter fullscreen mode Exit fullscreen mode

After this, you can get Ngrok running from the command line by telling it which port to connect to. The HTTP default is 80 so the command here would be:
ngrok http 80
Though it is not required to use the basic version of Ngrok, if you register an account you can install an auth token that will grant you access to more advanced features (see below).

Additional info is available on the Ngrok website.

Serve your Laravel Installation

Open a console window. Go to your local Laravel Installation and turn on the artisan server. We will be using 127.0.0.1 instead of localhost (default).

Leave the console and the artisan server process running. This is the Webserver listening for requests.

Additional info: Laravel Framework

Share your Laravel installation!

Open an extra console window and run Ngrok:
ngrok 8000

You should see something like:

Tunnel Status                 online
Version                       1.7/1.6
Forwarding                    http://284abb77.ngrok.com -> 127.0.0.1:8000
Enter fullscreen mode Exit fullscreen mode

This is the URL that you can share with anyone you want: http://284abb77.Ngrok.com. The user accessing it will see your Laravel Installation running at 127.0.0.1:8000.

And that’s it! Just remember to turn off Ngrok when you want to stop sharing.

Some Additional Ngrok Features

Ngrok is an open-source, free software tool that anyone can use. But if you register for an account and/or sign up for a paid plan you can unlock more advanced features. These include:

Customized and reserved domains:

These include the ability to reserve a specific domain name that will remain exclusive to you and your team. You can also specify a custom subdomain for your Ngrok tunnel and protect it with a password.

Multiple tunnels:

You can run multiple tunnels simultaneously through Ngrok. You can define tunnel configurations on a simple YAML configuration file and then start them just by entering the saved names as a command. You can even start all the tunnels defined in the configuration file with the following command:
ngrok start --all

Greater control and security:

Other paid-for solutions include the ability to whitelist IP access to your tunnels, thereby ensuring no unknown party can connect to your tunnel endpoints.

Top comments (0)