Accessing Localhost Server From Ionic App Running on a Mobile Device (iOS/Android)

Ever been in a situation where you want to test your Ionic application natively on an iOS or Android device, but the backend server/database you are testing against is a development server running over localhost on your computer?

Eventually, you will probably want set up a live backend for your application that you could easily access from your iOS or Android device because it would be hosted publicly. However, before you get to that point you might just want to do some quick testing locally without needing to host something for real on the Internet.

Outline

How do you access localhost from a mobile device?

Let's say you've got a server running on your machine at http://localhost:3000. This is fine when you are testing your Ionic application on your computer because you can just send your HTTP requests to:

http://localhost:3000/photos/upload

But once you deploy the application as a native iOS or Android application to your device, this URL will no longer work since the context for localhost means that it will no longer be referring to the computer where your server is running. So, how do we forward these requests from our mobile device to the computer that is running the server/backend?

Using the Ionic CLI to access localhost externally

Fortunately, this is quite easy to do with the Ionic CLI and Capacitor. As long as you are running your application on the same WiFi network, you will be able to access a server that is running on your computer from your external device.

In order to do this, you will need to install the native-run package globally if you have not already:

npm install -g native-run

Then just run the following command to get your application ready to run on iOS or Android:

ionic cap run android -l --external

or

ionic cap run ios -l --external

NOTE: This tutorial assumes you already understand the basics of using Capacitor with Ionic applications. It is also possible to do this without Ionic and the Ionic CLI, see the documentation on live reload for more information.

When you run this command, you should see a message like this pop up at some point:

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.0.105:8100

       Use Ctrl+C to quit this process

This is where the live development servers are running and where we can view the application. What is important for us is the External address listed above. We can use this address instead of localhost and it will allow us to access a server running on our computer from the Ionic application running on a device. The External address listed above is:

http://192.168.0.105:8100

Which means that the Ionic application us running over port 8100 at the IP Address 192.168.0.105. Our local backend/server is also running at this same address, just on a different port. In this example, we are assuming that the server is running over port 3000 but this might be different for your circumstances. This means that we would be able to access this server through:

http://192.168.0.105:3000

In our code, if we were sending an HTTP request to:

http://localhost:3000/photos/upload

We would just need to change it to:

http://192.168.0.105:3000/photos/upload

This would allow the request to successfully be sent from the iOS/Android device to the server running locally on our computer. You don't even need to have your device plugged in via USB, as long as it is running on the same WiFi network it should work.

Summary

This is a neat little trick you can use, which comes in especially useful in the earlier stages of development where you might not have a proper backend set up yet. Or perhaps you just want to play around with things and learn without needing to go deploying servers to Heroku, Digital Ocean, Linode, or elsewhere.