DEV Community

Cover image for Using Ngrok To Set Up Multiple Ports
Ethan
Ethan

Posted on • Originally published at ethan-dev.com

Using Ngrok To Set Up Multiple Ports

Introduction

Hello! ๐Ÿ˜ƒ Recently I had to set up two ports to listen on a global network, so in this tutorial I'm going to show you how I used a service called Ngrok to do that.


What Is Ngrok

Ngrok is a tool that creates a secure tunnel to your localhost. This is useful when you want to share your local web server or any TCP based application over the internet.

Before we can use it we need to sign up for a free account and install it.


Installing Ngrok

First you need to sign up for a free account via:
https://dashboard.ngrok.com/signup

Once you have signed up for a free account you need to install Ngrok either via zip or via the command line, once install run the following command to initialize ngrok:

ngrok config add-authtoken [YOUR_AUTH_TOKEN]
Enter fullscreen mode Exit fullscreen mode

Done, now we can actually use ngrok. ๐Ÿ˜†


Using Ngrok To Serve Two Ports

Usually if you use ngrok with the command line you can only serve one port with a free account, but if you use a configuration file you can actually serve upto two with one command.

To do this create a file called "ngrok.yml" and fill it with something like the following:

version: 2
authtoken: [YOUR_AUTH_TOKEN]
tunnels:
  first:
    proto: http
    addr: https://localhost:4000
  second:
    proto: http
    addr: 3001
Enter fullscreen mode Exit fullscreen mode

The above demonstrates a sample configuration file which has two tunnels, one tunnel shows how you can forward a localhost address that uses https, and the second tunnel shows how to forward http.

Now that we have our configuration file you can use ngrok to tunnel both of the above addresses by running the following command:

ngrok start --config ngrok.yml --all
Enter fullscreen mode Exit fullscreen mode

When the above command is run you will be given two global addresses. ๐Ÿ˜„
Try changing the above configuration for your own web applications and give it a try. Just remember since it's global if anyone gets your address they can access your web application.


Conclusion

In this tutorial I have shown how you can get a global address for up to two ports with a free Ngrok account.

I personally use ngrok quite a lot, especially for outside endpoints etc, so it is worth checking it out. ๐Ÿค“

If you have any useful use cases for ngrok please let me know.
As always happy coding! ๐Ÿ˜Ž


Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee.

โ€œBuy Me A Coffeeโ€

If you are looking to learn Algorithm Patterns to ace the coding interview I recommend the following course

Top comments (5)

Collapse
 
charlesr1971 profile image
Charles Robertson

Great little article. Thanks

When you add:

addr: localhost:4000

Can this represent the free domain like:

version: 2
authtoken: [YOUR_AUTH_TOKEN]
tunnels:
  first:
    proto: http
    addr: https://[YOUR NGROK FREE SUB DOMAIN].ngrok-free.app:3000
  second:
    proto: http
    addr: 3001
Enter fullscreen mode Exit fullscreen mode

Or have I misunderstood?

Collapse
 
ethand91 profile image
Ethan

I'm pretty sure the domain is fluid, thus changes every time so you can't do something like.

Collapse
 
charlesr1971 profile image
Charles Robertson • Edited

NGROK have very recently introduced one free static domain [sub domain name] for free account holders. ๐Ÿ™‚

ngrok.com/blog-post/free-static-do...

Thread Thread
 
ethand91 profile image
Ethan

Really? I didn't know that, thanks for telling me :) that's awesome!

Thread Thread
 
charlesr1971 profile image
Charles Robertson • Edited

I am afraid I could not get ngrok to work with two different ports on the same domain, like:

ngrok http --domain=[YOUR FREE STATIC SUB DOMAIN NAME].ngrok-free.app 3000
ngrok http --domain=[YOUR FREE STATIC SUB DOMAIN NAME].ngrok-free.app 3001
Enter fullscreen mode Exit fullscreen mode

How could I do this, using:

ngrok.yml
Enter fullscreen mode Exit fullscreen mode