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?

1

did you get this working? – Avinash May 24 '18 at 06:25

Tad Lispy · Answer 1 · 2020-03-19T10:59:05.463

44

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

edited Mar 19 '20 at 10:59

answered Mar 09 '18 at 16:27

Tad Lispy

2,806
3
30
31

1

Note that this will only work if you serve your app over LAN. Here is a feature request to enable this for tunnels as well: https://expo.canny.io/feature-requests/p/tunnels-to-additional-ports – Tad Lispy Sep 03 '18 at 07:11
5

this Work for me, It is important to mention that it is necessary to add `http://` before the IP – Emmanuel Garcia Martinez Jul 22 '19 at 19:20
`Constants` has been moved to `react-native-unimodules` in recent versions. – borislemke Mar 15 '20 at 08:43
Thanks for your comment @borislemke. I did a quick research and according to https://docs.expo.io/versions/v36.0.0/sdk/constants/ `expo-constants` is still the module that exposes `Constants.manifest`. Are you saying it won't work this way? I don't use Expo anymore so it's difficult for me to actually test it. – Tad Lispy Mar 19 '20 at 11:02

score 33 · Answer 2 · edited Aug 16 '19 at 08:52

33

import Constants from "expo-constants";

const { manifest } = Constants;

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

edited Aug 16 '19 at 08:52

Nick Rameau

1,258
14
23

answered Jul 08 '19 at 23:33

tiagob

1,088
1
11
14

saved me precious time of my life – Marwen Trabelsi Oct 13 '19 at 20:02
use @Emi solution below for those of you coming after `debuggerHost` got deprecated – moto Jul 19 '23 at 07:54

score 13 · Answer 3 · answered Nov 21 '17 at 16:32

13

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.

answered Nov 21 '17 at 16:32

Poptocrack

2,879
1
12
28

1

Lifesaver.!!!!!!!!. Also, use the port number like this. http://192.168.1.20:3000/routname – Shalin Nipuna Mar 15 '20 at 06:42

score 6 · Answer 4 · answered Jan 10 '19 at 23:28

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.

score 5 · Answer 5 · answered Jun 03 '19 at 15:34

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!

score 5 · Answer 6 · answered Mar 17 '23 at 23:45

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.

joeytwiddle · Answer 7 · 2022-08-01T11:16:29.830

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}/...`;

score 1 · Answer 8 · answered Mar 07 '18 at 11:43

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)

score 1 · Answer 9 · answered Oct 01 '20 at 20:13

1

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

answered Oct 01 '20 at 20:13

jonyB

9,257
2
8
11

score 1 · Answer 10 · answered Dec 25 '21 at 12:38

Quick and easy solution that works straight forward!

Localtunnel docs

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

npm install -g localtunnel

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

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.

score 1 · Answer 11 · answered May 25 '22 at 11:04

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

@kd12345 The real address that you're hosting on. For example: https://myrealdomain.com/api/user/login — Matthew Trent, Jan 11 '23 at 07:18
Hi and thank you for getting back to me. My problem is i want to show an HTML file. I have done this you requested but now the url doesnt open in my react native webview but opens in my browser — kd12345, Jan 11 '23 at 07:21

score 0 · Answer 12 · answered May 26 '21 at 02:23

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

score 0 · Answer 13 · answered Oct 29 '21 at 18:20

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.

Michel Floyd · Answer 14 · 2022-02-04T22:03:10.990

0

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.

edited Feb 04 '22 at 22:03

answered Feb 03 '22 at 01:01

Michel Floyd

18,793
4
24
39

pera · Answer 15 · 2021-08-13T10:08:01.923

-1

[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

edited Aug 13 '21 at 10:08

answered May 12 '21 at 20:51

pera

882
11
21

Calling locally hosted server from Expo App

15 Answers15

Linked

Related