Use Ngrok to share a preview of your web project to everyone!
Tags: webdev, programming, ngrok
Published: 2021-10-16 09:04:38

## 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](https://dashboard.ngrok.com/signup), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doa2k5sfhhjbzlesf0cu.png)

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:

![Ngrok Tutorial Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mef4w83qzpo0izdq1fa8.png)

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

```sh
./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`:

```sh
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](http://bottlepy.org/docs/dev/index.html).

First, `cd` to your web project:

```sh
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:

```sh
π 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:

```sh
π 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 <kbd>Enter</kbd>, 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! :smile: