DEV Community

Wumi4
Wumi4

Posted on

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:

Ngrok Tutorial Image 1

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 ...]
Enter fullscreen mode Exit fullscreen mode

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:

Ngrok Tutorial Image 2

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

./ngrok authtoken <YOUR_AUTHTOKEN>
Enter fullscreen mode Exit fullscreen mode

After doing that, ngrok will output something like this:

Authtoken saved to configuration file: path/to/ngrok/config/file/ngrok.yml
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

π ngrok http <PORT>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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! 😄

Discussion (0)