Have you ever been in a situation where your website seemed to work well on your local host but failed to work once you deployed it and you wanted to show this website to a friend?
I've been in a similar situation and it is frustrating, to say the least. But, now with the help of tunnels, you can share a preview of your localhost in seconds and I'll be showing you exactly how you can do this.
I'll be showing you how to do this with the help of both Cloudflare Tunnels and Ngrok's TCP Tunnels.
CloudFlare Tunnels
First, let's get started with Cloudflare Tunnels.
For the primary step, we will be setting up Cloudflare tunnels on your local system using the "Cloudflared" CLI tool which you can download from here by following the steps concerning your operating system.
Once you are done with the above step, authenticate the Cloudflare tool by opening your Terminal and typing in the following command to authenticate.
cloudflared tunnel login
After this, run the below command,
cloudflared tunnel --url <LOCALHOST-URL>
And, Voila! you get a randomly generated URL, which is the URL to your localhost. Here's how it looks on my machine.
Ngrok
Now, let's move ahead with Ngrok,
You can install Ngrok on your machine by following the steps here
After this, create/register an account for yourself on Ngrok [This is a required step]
After the registration process, there is one final step that you have to complete before you can start using Ngrok. You need to authenticate the Ngrok agent to be able to use it on your personal computer.
To do this, get the auth token from this website and then enter the following command in your terminal.
ngrok authtoken <YOUR-AUTH-TOKEN>
Now, enter the following command and Ngrok should be up and running.
ngrok http <LOCALHOST-URL>
Click on any of the links you see in the above image on your device to preview your local host.
Now, I am sure some of you are confused about which one you should ideally be using and IMO both of them have their pros and cons and in my case, both of them seemed to work flawlessly.
But, I've noticed that in some cases Ngrok seems to win over Cloudflare Tunnels as ngrok provides a web UI where you can observe all of the HTTP traffic. You can read more about this over here.
But, Cloudflare Tunnels is very reliable in general due to the backing up of a billion dollar company with a hard focus on security and I liked it due to an additional amount of available features in its free tier like setting custom names to your localhost preview, etc.
In conclusion, both of these tools should suit your needs as an average developer so pick anyone you like and share that quick preview of what you built with your friend.
That's it from my side. Hope you folks have a great day!