loading...
Cover image for how to share localhost anywhere in to the world ? πŸ€”

how to share localhost anywhere in to the world ? πŸ€”

dip15739 profile image Dip Vachhani ・2 min read

we can share localhost anywhere in to the world using Ngrok that developed by Alan Shreeve πŸ‘¨β€πŸ’»

What is Ngrok ?

Ngrok basically creates a tunnel to your local development server and generat random subdomains on ngrok.com with http and https. using that linkes , we can view the locally developed application from anywhere but required development server is kept running.

How to use Ngrok ?

Using ngrok is so simple.

  1. Setup and installation
  2. configuration
  3. Launching the tunnel

1. Setup and installation

To start using ngrok, we have to signup an account on ngrok.

After you signup, it takes you to the dashboard.

Download the correct package according to your operating system.andThe steps to installation are mentioned down.

For Linux / Mac :-

  1. Download the zip and extract using the below command on your terminal.

    unzip /path/to/ngrok.zip
    
  2. To access ngrok from anywhere on your command prompt.

    • copy/move ngrok in bin directory using below command.
    • run this command where you extract the zip file.
    cp ngrok /usr/local/bin 
    
  3. Restart your bash and you should be able to run ngrok command.

For Windows :-

  1. Download the zip and extract the executable file and run it.
  2. Move executable file ngrok.exe to C:\Windows\system32\ngrok.exe
  3. Add Environment Variable
    • Right-click the Computer icon and choose Properties, or in Windows Control Panel, choose System.
    • Choose Advanced system settings.
    • On the Advanced tab, click Environment Variables.
    • Click New to create a new environment variable.
    • Add your path C:\Windows\system32\ngrok.exe
    • click Apply and then OK
  4. Now you should be able to run ngrok command.

2. configuration

The next step is to authenticate the client you have installed on your system with your ngrok account.

Run the following command on terminal :-

ngrok authtoken YOUR_AUTH_TOKEN

YOUR_AUTH_TOKEN is the token that is displayed on the dashboard. This saves the auth_token of your account to a .yml file in your local machine.

3. Launching the tunnel

Run the following command on terminal :-

ngrok http 80

Here 80 is the port number where your local server is running. You would have to change it to the PORT NUMBER of the local server you are running. Make sure the development server for the application you want to tunnel is up and running.

Let's see Example with react app 🧐

First create react app using npx create-react-app my-app and start local server using npm start not add tunnel using below command

ngrok http 3000

By running this command, your terminal / prompt should look something like this.

This shows the randomly generated subdomains where your application is accessible.

This cover diagram was taken directly from ngrok πŸ˜‰

Posted on by:

dip15739 profile

Dip Vachhani

@dip15739

I am a full-stack developer(Beginner) with self project experience in Bootstrap JavaScript React Node.js and MongoDB.

Discussion

pic
Editor guide
 

May be ngrok is good but here is something more better :

No download required. Run your app on port 8080 and then run this command and share the URL.

ssh -R 80:localhost:8080 ssh.localhost.run

 

I currently have a billing problem with ngrok because they are charging me 2X the usual amount without notice. I have been trying to contact them for since Oct 1 without answer.

 

Ngrok is awesome!

An easy way to share your progress with your clients without dealing with Development server and environment.

 

I guess the easiest and cheap way is to do port forwarding with your router!

 

Dude I discovered ngrok no long time ago and it's awesome! Thanks for sharing :D

 

Thank you very much this was really helpful ☺️

 
 

Thank you for this article.
Was very useful for me. :)

 

I m sure you can also use no-ip.org