• Skip to primary navigation
  • Skip to main content

Mark Z Filter

iOS Engineering • Android Engineering • Public Speaking • Team Leadership

  • About Me
  • Blog
  • Contact
    • Privacy Policy
  • Show Search
Hide Search
You are here: Home / Android Development / How To Connect Your iOS Or Android App To A Localhost Server

How To Connect Your iOS Or Android App To A Localhost Server

Mark · Feb 7, 2018 · 1 Comment

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.

Android Development, iOS Development, Mobile Development, Web Development

MARKZFILTER

About the Author

Mark specializes in native iOS and Android mobile application development. He studied Mobile Development at Full Sail University and earned his first Bachelor of Science degree from NYIT in Math/Physics, Computer Science, & Behavioral Science.

When Mark is not building apps, you can find him drinking coffee, listening to audiobooks, brushing up on Calculus, learning about Genetics, or spending the night hours watching TED Talks; just about what you would expect from someone who has the INTJ personality type. Did someone say NERD?

  • GitHub
  • LinkedIn
  • Pinterest
  • Twitter

Reader Interactions

Trackbacks

  1. How to Build a Mobile Backend with MongoDB and Express - Mark Z Filter says:
    February 27, 2018 at 1:15 PM

    […] How to Connect Your iOS or Android App to a Localhost Server […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Have an App Idea? Start your project. Free Consultation

MARKZFILTER

Copyright © 2022 MarkZFilter.com␠ • Handcrafted with ♡ by Mark Z Filter • All Rights Reserved • Log in

  • About Me
  • Blog
  • Contact