Use Ngrok to share a preview of your web project to everyone!

Situation

So, you just build a very cool website, but the only problem is that it is only available through your local web server, or localhost. You can buy a domain, set up a simple web server, get an SSL certificate, and then figure out how to set for the code to work. But what if you just want to share a quick preview of your website to a friend, or test it on mobile devices, without having to deploy or anything?

That's where tunnels come in! Tunnel allows you to set a secure, but temporary connection between your localhost and the Internet. In this post, I will show you how you can share a preview of your web project to everyone using Ngrok!

Get Started

Note: In here I am assuming you are using Linux or MacOS. If you use Windows or another OS, then this tutorial is maybe not for you.

Installation

First, we will need to create a Ngrok account. You can sign up using this link, or go to ngrok.com, and then click on Get Started For Free.

After signing up, you should have a dashboard that looks like this:

Now, click on Download for Linux, and a zip file should be installed.

Go to your default Download directory, and then unzip the zip file using unzip.

After unzipping, you should see an executable called ngrok. Running this executable should show something like this:

NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

DESCRIPTION:
    ngrok exposes local networked services behinds NATs and firewalls to the
    public internet over a secure tunnel. Share local websites, build/test
    webhook consumers and self-host personal services.
    Detailed help for each command is available with 'ngrok help <command>'.
    Open http://localhost:4040 for ngrok's web interface to inspect traffic.

[bla bla bla ...]

This means that we have installed Ngrok!

Authenticate the Ngrok agent

Now, we will need to authenticate the Ngrok agent that we just installed, this will grant us access to more features and longer session time.

On the dashboard, in the tab Getting Started, click on Your Authtoken. Click on that will lead to this:

Now, click Copy to copy your authtoken, and then type this on the terminal to authenticate:

./ngrok authtoken <YOUR_AUTHTOKEN>

After doing that, ngrok will output something like this:

Authtoken saved to configuration file: path/to/ngrok/config/file/ngrok.yml

Which means that we have authenticated our ngrok agent.

Fire it up

Now, we have done setting up our Ngrok, let's fire it up!

Before we get into it, we will set up ngrok in our $PATH to conveniently run ngrok everywhere in our shell, without having to remember the path.

Note that this depends on the shell that you are using. On fish (the shell that I am currently using), I will set up ngrok in my $PATH like this in .config/fish/config.fish:

export PATH="/path/to/ngrok/:$PATH"

Then, restart your terminal, and you should be able to run ngrok using ngrok command in the shell.

Now, we will start using Ngrok in our web project. For the purpose of this tutorial, I have set up a simple web server using Bottle Framework.

First, cd to your web project:

cd /path/to/your/project

Next, start the local web server. This depends on your project. For my project, since I only use a single file for my project (which is main.py), I can start the local web server of my project like this:

π python3 main.py
Bottle v0.12.19 server starting up (using WSGIRefServer())...
Listening on http://localhost:8080/
Hit Ctrl-C to quit.

After start the web server, open another terminal and type:

π ngrok http <PORT>

With <PORT> is the port of your local web server. In my case, it is 8080, so I will type in the terminal:

π ngrok http 8080

After press Enter, you should see an interface that looks like this:

ngrok by @inconshreveable                                                                                                                                (Ctrl+C to quit)

Session Status                online
Account                       Wumi4 (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://b0be-2001-ee0-4bab-5020-5343-d3ed-89bc-e519.ngrok.io -> http://localhost:8080
Forwarding                    https://b0be-2001-ee0-4bab-5020-5343-d3ed-89bc-e519.ngrok.io -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              2       0       0.01    0.00    0.01    0.01

As you can see, there are two different links in the Forwarding part: One is http and one is https. Click on any of these links will lead to your website.

End

So that's it! You have just learned how to use Ngrok to set up a temporary link that you can use to share it as a preview to everyone!

I hope you enjoy this tutorial! This is my first blog post since July, so the post may have some errors.

Ok, that's for all! Goodbye! 😄