Accessing localhost application over the internet - with Ngrok

Sometimes it can really be frustrating when working on a localhost project that requires a secure HTTPS for it to work , for instance accessing camera and location in HTML, using Facebook and Google authentication require you to be running on a secure HTTPS, or making your application available over the internet for testing.
you can create and debug your localhost project on a secure HTTPS using Ngrok.
With Ngrok, you can make your localhost project accessible over the internet with secure HTTPS.

In this article, we'll learn how we can use Ngrok to make our localhost project available over the internet for easy testing and debugging purposes.

What is Ngrok?

Ngrok is a globally distributed reverse proxy that serves your web services from any cloud or private network, as well as your local machine. It allows developers to locally-hosted web server services over the internet. These locally hosted server will now appear to be hosted on ngrock.com subdomain
To be able to use run ngrok for your project, the project must be running on your local machine and be available at http://localhost:[any_port]

How to setup Ngrok

Before we get started we need to login to the Ngrok dashboard. If you do not have an account, you can create a new ngrok account on their website.

Step 1

From your Ngrok dashboard click on Download for Windows to download Ngrok on your computer

Step 2

After Ngrok has finished downloading, extract the downloaded file.
Open your terminal and navigate to the folder where you extracted Ngrok agent file, now run the command below to install Ngrok agent:

start ngrok.exe

Step 3

Now we need to add ngrok authtoken to the installed ngrok agent, to do this is pretty simple, go to your ngrok dashboard and click on Your Authtoken to get your token. Under command line copy the command there as shown in the screenshot below:

Step 4

In the terminal right click on it and past the copy command in the previou step, the execute it to configure your Authtoken. Once the Authtoken is configured successfully we can now test our Ngrok agent.

Step 5

You need to have localhost server running on your computer before starting ngrok: if you have local web server on your computer you can skip this step but if not create a react app with a local web server be running the commands below on another terminal:

npx create-react-app my-app
cd my-app
npm start

Once the react app has been installed, the react application will be running on localhost port 3000.

Step 6

Now that we have our local web server running we can start ngrok on the terminal with the command below:

ngrok http 3000

Note : replace the 3000 with the port that your local web server is running.

Copy the forwarding url and paste it to your browser, you’ll see something similar to the screenshot below:

Conclusion

In this tutorial, we learnt how to make localhost web servers available on the internet using Ngrok, this gives developers more control and flexibility before officially launching projects on the internal, it also makes the development process more easy.
I hope you enjoy the tutorial, thank you.