ngrok — make your localhost online

Have you ever needed to show your project hosted in localhost to friend/client?

First let’s look at the traditional way of doing this.

  1. Buy a hosting or find a free hosting.
  2. Login to account.
  3. Setup databases and other configuration for new site.
  4. Upload files.

Loooooooooooong process.. Isn’t it? 😑

Let’s look at how to use ngrok for making your localhost online.

Download ngrok

ngrok is free to download from it’s official website.

Find the suitable version for your OS : https://ngrok.com/download

Run ngrok

  1. Unzip the zip file you downloaded and open command prompt/powershell from that location. (Just type cmd in the address bar)
  2. Type ngrok http #port and press Enter. #port is the port for your localhost. default : 80
  3. It will give you result like below.
ngrok in action

forwarding http://somealphanumerics.ngrok.io -> localhost:3000

Share this forwarding address with your friend/client. They can view your localhost project using this link. It will be different from time to time. So every time you start new tunnel make sure to send the correct link.

4. Press Ctr+C to close the tunnel.

Advance Configurations

To use the advance features of ngrok you need to have a paid account. Free account have some restrictions. You can find the pricing details here.

Custom subdomains

Your forwarding address can be customize according to your requirements. All you have to do is when you start ngrok give -subdomain parameter to the start command like this.

ngrok http -subdomain=nsa94 80

This will give you forwarding address as http://nsa94.ngrok.io

There are many more advance features like password protecting, rewriting the host header, disabling inspection.

Find more details from the Doc : https://ngrok.com/docs