Accessing localhost application over the internet - with Ngrok
Tags: server, localhost, ngrok
Published: 2022-04-27 22:24:39



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](https://ngrok.com/) 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](https://dashboard.ngrok.com/login) to the Ngrok dashboard. If you do not have an account, you can create a new [ngrok account](https://dashboard.ngrok.com/signup) on their website.

###Step 1
From your Ngrok dashboard click on Download for Windows to download Ngrok on your computer
![Ngrok dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw6xpc7oap08nr4r2wf9.PNG)

###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:

```bash
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:
![Ngrok Authtoken](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68hxdgjwypskvip0008n.PNG)


###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:
```bash
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.

![running ngrok](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5eardrigsjqhc764o32h.PNG)

###Step 6
Now that we have our local web server running we can start ngrok on the terminal with the command below:
```bash
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:

![vite react app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpsrx1f27cw69dyepuv1.PNG)

##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.