Are you still sharing your websites with your friends like this?

It's 2024, and if you are still sharing http://localhost:3000 with your friend, then let me help you out. In this blog, I will help you share your live project with someone without even caring about deploying the app you're working on.

The right way of sharing the live link of the project you're building

Let me show you some magic, which will share the live link of your project that is currently running on your local to anyone on the internet using a very simple tool.

The tool is called ngrok.

What is Ngrok?

Ngrok is like a magic tunnel for your computer. If you have something cool on your computer (like a game or a website) and you want to show it to someone far away, ngrok creates a magic tunnel so they can see it from their computer, no matter where they are.

Read more at this link

How to use ngrok for localhost, for free?

Let's build that magic tunnel together

• Firstly, install ngrok on your computer from here (don't worry its free).

• Create your free account, click here.

• Copy your ngrok auth token from your ngrok dashboard.

  

• Connect with your ngrok account using this command

    ngrok config add-authtoken <TOKEN>
  

• Start your project on your computer, for example, a React project you've been working on.

• Copy the link on which the app is running locally, for example http://localhost:3000

• Start your tunnel by running this command

    ngrok http http://localhost:3000
  

• You'll see something like this in the console UI of your terminal.

    ngrok                                                                   (Ctrl+C to quit)
  
    Session Status                online
    Account                       inconshreveable (Plan: Free)
    Version                       3.0.0
    Region                        United States (us)
    Latency                       78ms
    Web Interface                 http://127.0.0.1:4040
    Forwarding                    https://84c5df474.ngrok-free.dev -> http://localhost:3000
  
    Connections                   ttl     opn     rt1     rt5     p50     p90
                                  0       0       0.00    0.00    0.00    0.00
  

• Notice the forwarding link that goes by Forwarding https://84c5df474.ngrok-free.dev -> http://localhost:3000. This is the magic link!

• Test it out by sending it to a friend 😎

How does ngrok work?

Now you'll be curious about what's actually behind this magic tool. This is just ...

Interested in the in-depth explanation, view the full article here: link

Hope you liked the blog!

Thank you for reading this far. If you find this article useful, please like and share this article. Someone could find it useful too 💖

We can discuss more about this in Twitter or LinkedIn.