Calling locally hosted server from Expo App

Question

I am creating a react-native app and one of the components I have created contains a property which is populated through data coming from an http request.

Right now I am hosting the server from my laptop, however I am testing the app on my phone using the Expo app. Since these are two separate devices, the http://localhost:3000 calls are not working and thus I can not tell whether or not my component is properly working.

Is there any way for me to run the server on my laptop and set it up so that the http requests from within the Expo app reach the server?

Answer 1

You can get the IP address at runtime using the Expo manifest:

import Constants from "expo-constants";
const { manifest } = Constants;

const api = (typeof manifest.packagerOpts === `object`) && manifest.packagerOpts.dev
  ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`)
  : `api.example.com`;

This will set api constant to the address of your local development machine in development mode and to whatever address you use in production. Note that apps deployed through App Store / Play Store seems to have packagerOpts undefined. That's why we have additional typeof condition. In that case we assume it's production build.

More about the manifest here: https://docs.expo.io/versions/latest/workflow/how-expo-works/#expo-development-server

Answer 2

import Constants from "expo-constants";

const { manifest } = Constants;

const uri = `http://${manifest.debuggerHost.split(':').shift()}:4000`;

Answer 3

The solution using debuggerHost stopped working for me after setting EAS Update, so I started doing that instead:

const uri = Constants?.expoConfig?.hostUri
  ? Constants.expoConfig.hostUri.split(`:`).shift().concat(`:8080`)
  : `yourapi.com`;

In case you are using TS, for some reason hostUri is not typed but the prop exists.

Answer 4

You should replace the http://localhost:3000/ address with the ip address of your computer.

On windows, open a prompt and type ipconfig, check the line of your network interface and get the address IPV4, should look like 192.168.1.20. Then you can make your calls with fetch and an url looking like htt://192.168.1.20/routname.

By the way, your computer (server) and your device must be on the same local network. Wifi and lan shares the same network.

Answer 5

To add to Tadeusz's answer, in the current version of Expo (I'm on 32.0.0 right now), you would import Constants rather than Expo (even though the constants are referenced in the docs as Expo.Constants.manifest), so it would look like

import { Constants } from 'expo';
const { manifest } = Constants;

Also, prepending the generated address with the protocol seems to be a must to make it all work.

Answer 6

For the life of me, I could not get any solution that I found (including all the ones on this page) to work. I spent a couple days trying. Finally, I just gave up and worked around this whole problem by using localtunnel and exposing my service running on localhost:8080 to the web. Worked first try when calling it from my expo app. Maybe not the greatest long-term solution, but not so bad, either. I hope this helps someone else!

Answer 7

Tad Lispy's solution worked for me. But I formatted it a little bit differently.

I also added support for react-native-web, using the document object.

import Constants from "expo-constants";

//const inProduction = manifest.packagerOpts == null;
const inProduction = process.env.NODE_ENV === 'production';
const inExpo = Constants.manifest && Constants.manifest.debuggerHost;
const inBrowser = typeof document !== 'undefined';

export const apiDomain =
    inProduction ? 'mywebsite.com'
  : inExpo ? Constants.manifest.debuggerHost!.split(`:`).shift()
  : inBrowser ? document.location.hostname
  : 'unknown';

console.log('apiDomain:', apiDomain);

const protocol = inProduction ? 'https' : 'http';

const apiUrl = `${protocol}://${apiDomain}/...`;

Answer 8

I tried some of it and it didn't work, finally simply used ngrok

Answer 9

Works with React-Native app on iOS physical device that's running separately from your computer, but is calling a localhost API:

Your API call before may have looked like this: http://localhost:3000/api/user/login

On windows, open up your command prompt (press the windows key on your keyboard, type cmd, press enter; this should open it), then enter ipconfig into your command prompt and press enter.

This should give you a big list of data. Scroll down until you you see this field: IPv4 Address...... Take it's value from the right side (something like this: 192.168.1.33).

Next, plug this number into your API call like so: http://192.168.1.33:3000/api/user/login

Make sure you and your device are both using the same wifi network. This should now work.

Summary:

Old API call: http://localhost:3000/api/user/login

New API call: http://192.168.1.33:3000/api/user/login

Answer 10

If anyone is running into the same issue and nothing is working, just use ngrok.

npm install -g ngrok

Sign up on https://ngrok.com/ and get an authentication key. Add it to your config:

ngrok config add-authtoken <authentication key>

Now forward to whatever port your local server is listening on:

ngrok http 8080

It will give you the endpoint to use, e.g.

https://d1b3-2a02-c7c-67d5-3200-9135-ah8c-7f38-2h9f.ngrok-free.app

Simply replace your endpoints with this and both the Expo emulators as well your as your physical device will now be able to talk to your local server.

Answer 11

One another easy way. First you need to on Mobile HotSpot and connect to laptop using Mobile HotSpot. Then check you ip assign to your computer and replace api url http://localhost:80/ address to http://192.168.5.43:80/ in react-native source where you use.

Replace port 80 to your api server port no.

Make sure you have open server port (80) in firewall in laptop.

Test api in android rest-client https://play.google.com/store/apps/details?id=com.sn.restandroid app (url : http://192.168.5.43:80/api)

Answer 12

How to call a locally hosted server from Expo is explained in details from Divyanshu Singh with some solutions:

• By using ngrok or localtunnel
• By running the server on 0.0.0.0 (this solution worked for me)

https://dsinecos.github.io/blog/How-to-call-a-locally-hosted-server-from-expo-app

Answer 13

Quick and easy solution that works straight forward!

Localtunnel docs

1. Install Localtunnel globally (requires NodeJS) to make it accessible anywhere:

npm install -g localtunnel

2. Start a webserver on some local port (eg http://localhost:8000) and use the command line interface to request a tunnel to your local server:

lt --port 8000

3. You will receive a url, for example https://gqgh.localtunnel.me, that you can share with anyone for as long as your local instance of lt remains active. Any requests will be routed to your local service at the specified port.

Answer 14

[In addition to the above] If using Laravel artisan serve, pass in your computer ip as host parameter:

php artisan serve --host 192.168.0.19 --port 8000

Answer 15

Doesn't know why but this particular IP address is somehow related to the Android Emulator. I tried the above solutions (Machine's private IPv4) but that also didn't work. So, if someone's developing inside an Android emulator then you can use this IP address.

http://10.0.2.2

And don't forget to add the PORT number of your localhost server.

Answer 16

In my project I normally get the local dev server via config so I adapted @tiagob's answer to just patch the localhost address:

let uri = Config.host;
if (uri.includes('localhost') && manifest.debuggerHost)
  uri = uri.replace(
    'localhost',
    manifest.debuggerHost.split(':').shift()
  );

In production the config won't include localhost so this code will just return the unmodified configuration variable.

Answer 17

With Laravel, the pera response may help...

Start your server with this commands: php artisan serve --host 192.168.0.19 --port 8000

replace '192.168.0.19' with your ip address