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.
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:
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
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!
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:
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:
In our code, if we were sending an HTTP request to:
We would just need to change it to:
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.
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.