Connecting App to Visual Studio Localhost API

Posted on ,
 

In the realm of mobile app development, APIs (Application Programming Interfaces) play a pivotal role, acting as the bridge between the app and other computer systems.

Whilst developing an API for a mobile app, it maybe necessary to run the solution on a local development computer, for the purpose of testing and debugging, before it is released to the staging and live environments.

This isn’t as straightforward as it should be, especially when running the API solution on IIS Express within Visual Studio. It should be as simple as providing 127.0.0.1 or the loop-back IP address, which for both Android and iOS emulators is 10.0.2.2.

However, this rarely works and when it does, it’s temperamental. Equally, it maybe that the app needs to be tested on a physical mobile device. In which case, the API running on a development environment (localhost) will not be accessible to other devices on the local network (LAN).

There are three alternative ways that could be used to connect the app to the localhost API: –

  1. [Easiest/Recommended] Use ngrok to expose the local API publicly on the net
  2. [Easy] Change the applicationhost.config file within the API solution
  3. [Trickier] Install and run the API solution from IIS installed on the machine

It is possible to run the API solution in debug mode from Visual Studio with all of these options.

In this post, I will explain how to use NGROK. I.e. option 1. As this will enable the app to access the API anywhere, as long as there is an internet connection.

Prerequisite

It is recommended that the app has a hidden setting for changing the API URL. At least for the purpose of development. This will enable the NGROK API URL to be changed without code changes, builds and/or releases.

Ngrok

Ngrok works by punching a hole through firewalls and NATs by initiating an outbound connection from the Ngrok application running on the local machine. Once the application is up and running, it will generate a HTTP and HTTPS URL that a user or an application can use to reach an API or website running on a local machine.

  1. Create an account on the Ngrok website.
  2. Download the Ngrok application from their website.
  3. If a ZIP file was downloaded, extract it into a directory/folder where you can find it later on.
  4. Follow the installation instructions from the Ngrok website. For example, adding the authorisation token.
  5. Next open a Visual Studio application that uses an instance of IIS, such as an API or web solution.
  6. Start the application in debug mode, which should start IIS. Then a new browser window should open directing the user to the application.
  7. Take a note of the port number after the colon in the URL from the browser window. It should be something like http://localhost:[portnumber]. e.g. http://localhost:59132.
  8. Open a Command Prompt in the same location as the Ngrok application. An easy way to do this is by opening Windows Explorer (Windows Key + E) and then opening the application folder. Then whilst holding the shift key, right-mouse click and ‘Open Command Prompt’ should appear in the popup menu.
  9. Using the command “Ngrok http 80” does not usually work with IIS localhost.
    Instead, use the command Ngrok http -host-header=localhost [portnumber]
    Note: the port number should be the same as per step 7.
  10. Once you have executed the command in step 9, a HTTP and HTTPS URL should be generated and appear in the Command Prompt window. As you can see from the screenshot below, I use Cmder instead of Cmd, but they essentially do the same thing.

    ngrok running in Cmder
  11. Now all that needs to be done is to copy one of the forwarding URLs from the command window. It is best to check that the URL is working first by pasting it into a browser window first. If the API/web application can be accessed successfully it should appear in the browser window and also appear as a successful connection in the command window. It should also be noted that ngrok has a much more user-friendly interface for monitoring traffic, which can be accessed from a web browser whilst ngrok is running. This can be accessed by using the Web Interface URL from the command window.
  12. That’s it! It should now be possible to use one of the forwarding URL’s in the mobile app.

The ngrok method could also be used to access a local machine from a mobile device running remotely or on a different network or connection.

 

Post Categories