DEV Community

Cover image for How can Ngrok help me expose my local server worldwide?
Mohamed Nadir Kerroum
Mohamed Nadir Kerroum

Posted on • Updated on

How can Ngrok help me expose my local server worldwide?

Hi, this is CoderNadir in another post where I'll share with you how to expose your local server to the world!

What do I mean by exposing it to the world?
I mean share a link to anyone by running a (Node/Nestjs/...) server in your local machine!

The question now is how?
Simply by the help of Ngrok

For this tutorial let me explain to you what is Ngrok based on what we'll use it for, and if you want to read more about it then follow this link:
Ngrok overview

You can think of Ngrok like a hosting service where you can put your app and it will be public for access by anyone, but not really 😒. so keep reading and you'll get the idea clearly!

Note: it's only free for non-commercial use. see pricing
In this tutorial I'll be using Windows 11 as OS

Now let's jump into the important part from this tutorial!

1- Create an account here.
2- Chose your OS and download the ZIP folder!
Zip File
3- Go to your downloads and extract the zip file! once you'll extract it, you'll be popped up by a window asking you where you want to extract the file! remove the path and paste this:
C:\ngrok
Now to navigate to that extracted file we should go to:
C:\ngrok and you'll find this file:

Extracted File

Now if you double click this file you'll open a Ngrok window with some details:

ngrok cmd window details

You've made it right! (really 😒) not yet!

4- Now we want to be able to run ngrok commands from the command line without the need to navigate to app folder and run it, therefore we'll need to set up the system environment.

Search Edit the system environment variables in your settings and open it!

Edit the system environment variables

Then click:

CoderNadir

Next, Select Path and click edit

CoderNadir

Click New then paste the path to your ngrok app in our case it's C:\ngrok then close all the opened windows by clicking ok button

CoderNadir tutorial for ngrok installation

Now you can use ngrok from the command line, so open it and type: ngrok and it should open a Ngrok window with some details!

Note if you want to test it in your Code Editor like (VSCode) you might need to close it and open it or even restart the PC!

We need another configuration before start using it, so hang on there 😀

Go to your ngrok -dashboard_ and under the section:
Getting started => Your Authtoken
copy your authentication token, paste it in the command line and hit enter, Command:
ngrok config add-authtoken <YOUR_AUTH_TOKEN>

Hooray! now we can start using it 🥳

I'll assume that you already have a local server running, let's say on port 3000, cool!

5- Now running the server with Ngrok
Your ngrok command should be:
ngrok http 3000

You'll see some details about your server, let's say your online app 😉
(1 is your public URL server, 2 is your forwarded local server)

ngrok server tutorial by CoderNadir

AND BOOM 🚀 Now you know how to expose your local server to the world! 🥳

BUT HOLD ON!
WHAT IF YOU WANT TO ALSO EXPOSE YOUR DATABASE? 🤔
remember that your account is free and you're limited to only one forwarded server!

Let me know in the comments below if I should create the second part without the need to pay! 😉🤑

Catch you next time! (second part 😅)

Top comments (0)