Over The Internet Share Locally Hosted .Net Core Application URL Using Ngrok App

ngrok:

ngrok is an application that helps the developers to share their locally hosted applications (like .Net, Angular, Vue, Reactive, etc) over the internet. ngrok uses the tunneling concept of reverse proxy server that establishes a connection to locally running applications over the internet.

Here to demonstrate the sharing of a locally hosted application we are going to create a sample .Net Core application that runs on localhost and will be shared its URL using ngrok app.

Note:
ngrok application exposes any local hosted application URL. So we can expose any applications like .Net Core, Angular, Vue, NodeJs, etc.

.Net Core Web API Sample Application:

Note:
You can skip this section if you are exposing local url that is other than .Net Core application.

Here I'm going to create a .Net Core Web API application, which runs locally using some local port. Then I'm going to expose the local URL over the internet to anyone using ngrok application.

Let's create a sample application using editors like Visual Studio 2019(also supports .Net Core 3.0 plus) or Visual Studio Code. On creating Web API application by default it exposes as sample endpoint for displaying weather forecast data. Here we try to expose this weather forecast endpoint using ngrok. So now let's access endpoint(example endpoint like "http://localhost:5000/WeatherForecast") 

Steps To Configure ngrok App:

ngrok is a cross-platform application that can be run on any operating system like Windows, Mac OS, Linux, etc.

Let's download it by navigating to "https://ngrok.com/download" and select download link matches to your operating system as below.

Now extract the zip file that is downloaded and open folder you can find a single executable file with the name 'ngrok' shows as below.

Now we need to register this executable file path into our window environmental variables. So that we can resolve the issue like 'ngrok is not recognized as the internal or external command'.

Map Local Url To ngrok App:

In the starting step, I have created a .Net Core application which runs on port '5000' locally. Now using ngrok app we need to map the local domain to ngrok subdomain, so that application can be accessed via the internet.

ngrok command to map local url:

ngrok http your_port_number

example command:- ngrok http 5000

Now open the executable ngrok file and enter the above command, then output show as below

On running map command, ngrok creates a random subdomain that maps to the local URL. Now we can share any of the subdomain with HTTP or HTTPS over the internet to access our application by others.

Now copy the ngrok subdomain and try to navigate on the browser.

We can observe an error showing taking a long time to respond. To identify the correct issue now check in the command window where ngrok is running as below

This redirection happened because in our .Net core application by default 'app.UseHttpsRedirection' middleware configured. But we mapped port '5000' which is a non HTTP URL of local application, so when ngrok subdomain URL tries to access "http://localhost:5000" our application middleware redirects it to https URL.  So to resolve this issue remove the 'app.UseHttpRedirection' middleware from our .Net Core application middleware.

Now try to navigate the ngrok URL in the browser and it shows as below.

We can observe our ngrok subdomain successfully able to load the local domain "http://localhost:5000". 404 response is due to no such endpoint exist on our localhost URL. Also, check the result on ngrok executable file as below

So lets access proper endpoint like "http://localhost:5000/WetherForecast" endpoint. So to access any local endpoint over ngrok subdomain, we need append the path of our local endpoint as the path of ngrok subdomain(eg:- https://dfsfdsfsfdfd.ngrok.io/WetherForecast).

Note:
Find more cool features that are provided by ngrok at "https://ngrok.com/docs"

Wrapping Up:

Hopefully, I think this article delivered some useful information on the ngrok to expose local hosted application URLs over the internet. I love to have your feedback, suggestions, and better techniques in the comment section below.

Follow Me:

Facebook

Twitter

Pinterest