How to Test Your Mobile App Backend on a Real Device Without Deploying

Why localhost Does Not Work on a Real Device

When your backend runs on http://localhost:3000, the address localhost refers to the machine that process is running on your laptop. When your mobile app makes a request to http://localhost:3000, the device resolves localhost as itself the phone. There is no server running on the phone's port 3000, so the connection fails.

Emulators handle this differently from real devices. The Android emulator maps 10.0.2.2 to the host machine's localhost, so you can use that IP inside the emulator and reach your laptop's server. The iOS simulator shares the same network stack as your Mac, so localhost actually works in the simulator. Neither of these tricks works on a physical device.

The Three Approaches

There are three practical ways to connect a real device to a local backend. Each has trade-offs that make it more or less suitable depending on your situation.

Approach 1: Local Network IP

Find your laptop's local network IP:

# macOS and Linux
ipconfig getifaddr en0   # Wi-Fi interface
# or
ip route get 1.1.1.1 | awk '{print $7; exit}'

# Windows (PowerShell)
Get-NetIPAddress -AddressFamily IPv4 | Where-Object {$_.IPAddress -like "192.168.*"}

Use this IP as the base URL in your app wherever you currently have localhost. For example, if your API runs on port 3000 and your laptop's IP is 192.168.1.42:

// Instead of this
const BASE_URL = 'http://localhost:3000';

// Use this
const BASE_URL = 'http://192.168.1.42:3000';

Approach 2: ADB Reverse (Android)

ADB reverse makes your Android device treat its own localhost as your laptop's localhost. Connect the device via USB with USB debugging enabled, then run:

# Forward port 3000 from the device to your laptop
adb reverse tcp:3000 tcp:3000

# For multiple ports
adb reverse tcp:3000 tcp:3000
adb reverse tcp:8080 tcp:8080

# Verify active reverse tunnels
adb reverse --list

After running this, your app can use http://localhost:3000 as the base URL and the request reaches your laptop's server. No IP address changes needed. The tunnel stays active until you disconnect the USB cable or run adb reverse --remove-all.

Approach 3: Localtonet HTTP Tunnel

An HTTP tunnel gives your local backend a public HTTPS URL. Your app uses that URL as the API base, and it works from any device on any network.

const BASE_URL = 'https://abc123.localto.net';

This URL works from an Android device on mobile data, an iPhone on a different Wi-Fi network, a tester on the other side of the world, and a CI pipeline running in the cloud. All of them hit your laptop's server in real time.

React Native and Expo

React Native projects typically store the API base URL in a constants file or environment variable. With Expo, you can use app.config.js to set different values per environment.

Basic React Native setup

// api/config.js
const DEV_BASE_URL = 'https://abc123.localto.net';
const PROD_BASE_URL = 'https://api.yourapp.com';

export const BASE_URL = __DEV__ ? DEV_BASE_URL : PROD_BASE_URL;

Expo with app.config.js

// app.config.js
export default {
  name: 'MyApp',
  extra: {
    apiBaseUrl: process.env.API_BASE_URL || 'https://abc123.localto.net',
  },
};

// Using the value in your app
import Constants from 'expo-constants';

const BASE_URL = Constants.expoConfig.extra.apiBaseUrl;

# Start with your tunnel URL as an env variable
API_BASE_URL=https://abc123.localto.net npx expo start

Using .env files with Expo

# .env.development
EXPO_PUBLIC_API_URL=https://abc123.localto.net

# .env.production
EXPO_PUBLIC_API_URL=https://api.yourapp.com

// Access anywhere in your app
const BASE_URL = process.env.EXPO_PUBLIC_API_URL;

Flutter

Flutter apps typically define the base URL in a constants file. Using the tunnel URL is straightforward, replace localhost with the tunnel address.

Constants file approach

// lib/constants/api.dart
class ApiConfig {
  static const String baseUrl = String.fromEnvironment(
    'API_BASE_URL',
    defaultValue: 'https://abc123.localto.net',
  );
}

// Using it in a service
import 'package:http/http.dart' as http;
import '../constants/api.dart';

Future<dynamic> fetchUsers() async {
  final response = await http.get(
    Uri.parse('${ApiConfig.baseUrl}/api/users'),
  );
  return response.body;
}

Passing the URL at run time

# Run with a custom base URL via --dart-define
flutter run --dart-define=API_BASE_URL=https://abc123.localto.net

Frequently Asked Questions