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!
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.
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
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!
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:
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
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
Then, restart your terminal, and you should be able to run
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.
cd to your web 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>
<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.
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! 😄