This is the second article in a series on How to Build a Mobile Backend with MongoDB and Express.

Articles in the Series

1. How to Build a Mobile Backend with MongoDB and Express
2. How to Connect Your iOS or Android App to a Localhost Server (this article)
3. How to Build a RESTful iOS Employee Manager App (coming soon)
4. How to Build a RESTful Android Employee Manager App (coming soon)

TLDR

• You can’t connect your iOS or Android mobile app to a local server as your local server is only accessible on your local computer or device creating the server.
• You need a tunnel that pushes the local server traffic to a remote server that will intercept the gets and posts and relay them to and from an external client.
• Go to ngrok.com and download the script file, spin up your local server, get the port number, and use ngrok with the port number, get the generated URL, and use that URL as you would a normal domain for your RESTful web service integration in your mobile app development cycle.

Introduction

Have you ever wondered how to connect your iOS or Android mobile app to a localhost server? Well, of course, the answer is yes. You are reading this article after all. There are a lot of compelling reasons to want to connect an app that you are building in Xcode or Android Studio to a localhost server. Maybe you are looking to showcase your skills as a full stack mobile developer, you are trying to build a tvOS or Android TV application with video files that you host on your own localhost environment, or maybe you are just looking to build out a local build before pushing things up to a Staging server and eventually to the Production server. If you have no idea what I am talking about, don’t worry about it.

This issue has been a point of frustration for many mobile developers, as can be seen from numerous questions being asked on StackOverflow. This simple problem is that when you deploy an app to a mobile device, that app’s context is the mobile device and the network to which that device has an active connection. Your phone cannot connect to your computer’s localhost because localhost only exists on your computer. If your phone’s web browser cannot directly access your computer’s file system, then why would it be able to access your computer’s localhost?

ngrok Is The Fix

So, what you really need is some middleware; a piece of software that relays GET, POST, PUT, and DELETE messages from the clients, as well as serve the responses from your localhost server. The only way that this can feasibly happen is to use a tunnel. ngrok is a service that provides tunnels that does just this very thing, and the best news is that it is FREE for you, a solo developer. If you want to have a dedicated domain and some more options for developing multiple apps at the same time using their service, then definitely take the paid option. The pricing is very reasonable.

Steps

1. Create an account. This step is optional. You could just download the ngrok script file, but hey, why not create an account.
2. Download the ngrok script file. Make sure you download the appropriate version for your computer’s operating system.
3. Open up terminal and navigate to the containing folder where the ngrok script file is located, unzip it if its still an archive file, and make sure the script file works properly by running the help command. You should see a lot of output to the terminal console.
4. Next, spin up your local server on MAMP, XAMP, or whatever server you are using and take note of the port number the server is listening on.
5. Copy that port number and paste it into terminal after the ngrok HTTP command
6. Copy the URL that is generated and use that Url to test your local server on all of your external devices.

Make sure that all of your RESTful integration code references this newly generated Url. You might want to create a public static property for this address so that you can update it from one location if it changes over time.

Conclusion

I hope this tutorial helps you. The video below gives a nice walkthrough of how to do everything said above. If you like the video, please visit my YouTube channel, like the video and subscribe to the channel to get updates when more tutorials like this go live. What project are you developing using this technique? Leave a comment below.