Tuesday, June 9, 2020

Host website/api from local system | ngrok

Ngrok workflow
Have you ever tried to host your own website? If yes,then you must agree that it's really a time consuming, expensive, and tedious task when it requires frequent changes to satisfy your client or colleagues 😓.

Ngrok is a cross-platform service that enables you to expose your local development server to the internet.

You need not have any domain, server, or IT knowledge to use it. It is one of the most important tool when working remotely. You can expose your API or website to the internet without pushing your code to any server and the best part is all this for free.
This article will have the following sections:

How Ngrok works

Ngrok works as a mediator between the client and your system. Ngrok provides you an URL( say xyz.ngrok.io) that is mapped to the port of your system. Whenever someone hit the URL xyz.ngrok.io it will be forwarded to the port you mapped and the response will be forwarded back to the client 
Basically, Ngrok exposes a local server behind the NAT(Network Access Translation) and firewall to the public internet over a secure tunnel.
Setting up ngrok is one of the easiest things in the world. I have a project running from my previous article in my local environment at the port 3000.
local project

Setup Ngrok in Ubuntu/Windows

  • Navigate to https://ngrok.com/download and download a zip file compatible with your OS.
  • Extract it, you will get an executable file.
  • Open a terminal in the same directory and type the following command.
    ./ngrok http <port>
    example : ./ngrok http 3000
  • You will get a URL from ngrok to your website from the public network 

    Ngrok Terminal
Website Served from ngrok

Ngrok Dashboard

You need not register to Ngrok but if you want to view your active sessions and URLs you can use the Ngrok Dashboard
  • Register and log in to the website.
  • Navigate to Getting Started -> Setup & Installation.
  • You should see something like this.  

    ngrok Dashboard
  • Go to terminal and type
    ./ngrok authtoken <you_token>
    to connect view all your sessions in a dashboard 
  • Once you added this Ngrok will detect the tunnel itself and show you your active tunnels under Status -> Tunnels.

If you want you can get more info from here
If you want to use the service with your custom domain then you have to refer to their paid plans. Paid plans also provide advanced services like authentication and IP restrictions etc.

.... ƃuᴉpɐǝɹ ɹoⅎ noʎ ʞuɐɥʇ