ngrock – public URLs for exposing your local web server

Debugging an API that you are developing can be time consuming, needing to track and adjust some request data/JSON and after that send the request to your localhost service which you are debugging. Things can get even worse when you are working in a team and you need to replicate an issue that was reported by the App developers (web, mobile, raspberry pi  etc), where you need to debug multiple API calls to get to a certain state/scenario.

rest_api_to_database_connections.png

ngrok is a tool that I’ve recently discovered and I can say that has saved me a lot of time and manual execution of requests to my API. This tool is publicly exposing your localhost address (local web server), It connects to the ngrok cloud service which accepts traffic on a public address and relays that traffic through to the ngrok process running on your machine and then on to the local address you specified.

How it works

All you need to do is download ngrok application and can run many commands to tailor everything you need to publicly expose you local web server. After you download the application just run this command.

ngrok-exposeport

This instantly create a public HTTPS URL for a web site running locally on your development machine

ngrk-console.png

There a lot of other options which you can set in the free version and you can check them all on the following link -> https://ngrok.com/

Bad Request – Invalid Hostname problem

When I followed the instructions by just executing

ngrok http 80 

in order to expose localhost on port 80 I got this error when I tried to open the public address

BadRequest.png

Other people had this issue as well and the workaround is to use this command instead

ngrok http [port] -host-header="localhost:[port]" 

So, very simple to use, minor problems to make it work (like this one I’m mentioning) and you are good to go.

NGrok Web Interface

Another very useful part of the ngrok is the Web Interface. You can find the address in the console info.

ngrok-web-interface

There are two main tabs where you can have deeper insights of the calls to your API, this proves to be very useful while testing some (mobile/web) application in development environment and catch all the requests that are made.

Inspect Tab

In this tab you can see all the requests that are made through the ngrok tunnel, see the response code and the content that they have returned. Also there is an option to replay the request which is very simple just by clicking the “Replay” button.

gnrok-inspect-tab

Status Tab

If you are interested into statistics about your requests you can check those in the “Status Tab”. To be honest, this tab rarely has value for me but it’s sometimes good to have.

ngrok-status.png

Happy coding,

J.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s