How to use ngrok to show your ongoing project live?

How to use ngrok to show your ongoing project live?

Today, I'm going to discuss a very useful tool for freelancers, students, and anyone else who wants to demonstrate their progress and get input on a current project.

ngrok is the name of this tool. Using ngrok, you can tunnel your localhost traffic to a temporary URL. This method is extremely simple to use and takes very little time!

We don't need to waste a lot of time deploying our ongoing project on a staging or temporary webserver just to demonstrate progress and get feedback with the help of this tool. Let's take a look at how we can apply ngrok to our project. Follow the five measures below to get a temporary public URL for your project to demonstrate it.

Note: Whether you're a student or freelancer, the free plan would be enough to get the job done!

Step 1

We'll need to make a ngrok account first. Sign up for ngrok on their official website!

Step 2

After you've signed up, you'll see a screen similar to the one below. Please select a file to download (It will automatically suggest with the package you want to download according to your OS). Unzip the file until it has finished downloading.

Step 3

Copies the auth token from your account. After that, in the directory where you downloaded ngrok, run the following order.

Authentication token
$ ./ngrok authtoken <your_auth_token>

Step 4

The setup is now finished. You can now begin working on your project locally.

Page hosted on localhost:3000

Step 5

You can now tunnel your localhost traffic to a temporary URL. In the directory where you downloaded ngrok, run the following order.

$ ./ngrok http <the_localhost_port>

Sample: If you are running your project on port 3000 in localhost the command would be $ ./ngrok http 3000

When you run the command above, you'll get the following results. 
You can search your localhost view in public by going to the output URL. 

It's almost over! You can send this URL to your project managers to get feedback or to keep track of your progress.

To find out more, go to your ngrok dashboard.

Instead of creating temporary installations on servers just to demonstrate progress to your mentors or project managers, you can now spend more time on production!

Happy Coding! 🍻 👏


Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to npFeed
Great! Next, complete checkout for full access to npFeed
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.