How to make React app preview on mobile?

Question

I am a noob using create-react-app to create a App, yarn start start the server at http://localhost:3000/, I can't visit this url on my mobile. How can I make some configs to preview the app on my mobile?

Cimabue

Possible duplicate of How can I access my localhost from my Android device? – Mooneye

For anyone looking for the answer here for Windows. Run ipconfig and scroll down to the IPv4 that is under Wireless LAN adapter Wi-Fi: (if you are on a wireless service) because react only provides you the ethernet IPv4 ip, that your phone will not be able to connect to. – Stodgy

Answer 1

First, remember you can open a mobile view in a desktop browser (at least in Chrome and Firefox). See the article for more. It isn't a substitute of testing on a real mobile device but can help you identify more obvious issues.

Second, you need to use the IP address of your computer in your local network (assuming your mobile device is on the same network as your desktop). On Linux and Mac you can check your IP with ifconfig or using ipconfig on Windows. localhost always refers to the current machine, i.e. localhost on your desktop points to your desktop and on your mobile device it points to your mobile device. That's why you can't access it - the app runs on your desktop not mobile.

Once you know the IP address of your computer you need to replace localhost with it. In my case the IP is 192.168.1.10 so I use the following address to access my app:

http://192.168.1.10:3000/

Zippy

Answer 2

All answers are correct, except two points that are forgotten:

1. your network must be Private: on windows10, click on the wifi icon, then click on the network name, you'll see properties option, click on it, then on the network profile section, set it to Private

2. you might not be able to connect through the ip that npm run start writes in the cmd, try your other ip addresses too. as other friends mentioned, open cmd, type in: ipconfig and press Enter, then you'll see 3 parts that all have one line with: IPv4 Address, try all these ip addresses with the port number of your react application, i hope it helps

Loveliesbleeding

none of the answers worked. only after setting network to Private on windows 10 did it work. this answer is underappreciated for windows 10 users. – Barthel

This is the answer that I have been looking for 🙏 – Pneumectomy

Answer 3

If you want to test it on an actual device (That is what is recommended) you should ensure that you mobile phone is connected to the same network as you computer is and then when you run

yarn start
npm run start 

You should see something like this:

On Your Network:  http://172.xx.xx.xxx:3000/

Just put that IP address in your mobile browser and test your web application

Gird

Note that you cannot have any errors or warnings on the npm start. I had unused variable warnings, in which case it doesn't show the On Your Network – Rink

Answer 4

1. Type in cmd (windows): ipconfig

2. Look for IP address IPV4:

3. Type in URL search bar of your browser (example): 192.168.1.4:3000 3000 is the port number that your react app is running on:

4. Make sure that your mobile browser (Chrome is preferred) is on the latest update, my react app didn't load up for me because chrome wasn't updated.

Spirelet

Answer 5

This post is full of very useful information, However, i am also adding some of the points which have been left out, especially for a react app.

If you are using create-react-app

In this case when you start your react-app, it will show the url on which your can access the app on your device as shown in image below.

If your are not using create-react-app(possibly webpack)

1. Run your react-app server(webpack-dev-server for webpack).
2. Get your local ip using this command ip route get 1.2.3.4 | awk '{print $7}', you can get your ip in windows using ipconfig as ipv4 address.
3. Now simply put http://<local-ip>:<port-number> something like http://192.168.1.106:3000 in your mobile browser and bam its there.

Note : above measures only works if both your mobile and server machine are connected to same network.

Freed

Answer 6

1. Type ipconfig in your cmd...
2. See your public ip
3. Type that public IP in your mobile web browser with Port no. E.g: 192.168.0.175:3000/your_route
4. Enjoy( just make sure you are connected to same wifi )

Sheehy

Answer 7

For windows:

1. Find your public IP using ipconfig in cmd. Find IPv4 address under Wireless LAN adapter Wi-Fi. Make sure your phone and pc are in the same LAN (connect to the same Wifi). Use http://your_ip:3000 to preview your react app.
2. Tips: You must use https protocol to test the GPS service of your phone. For my case, I deployed it on Heroku to test the features using GPS.

Stricklan

Answer 8

On Mac os Catalina you can find your local Ip in the terminal like so:

ifconfig

Under (en0) from the list, check the address that comes after inet

Levasseur

Answer 9

Step 1:  First your system and Mobile should be on same WiFi network.
Step 2:  Run your React Application with   "npm start HOST=0.0.0.0" instead of "npm start"
Step 3:  Open your another terminal and get the your system IP address. for that you need to run "ifconfig" command in your terminal.
Step 4:  Open your mobile browser, and type "192.168.225.99:3000"  in your address bar.This is for Linux Users. [![enter image description here][1]][1]

Phonoscope

Answer 10

Apart from the answers about finding out what your IP address is, you should notice that your firewall might be interfering. If on Linux, you can disable it e.g.

sudo ufw disable

and to reenable it

sudo ufw enable

Terraqueous

Answer 11

Add a hostname to your hosts file that points to localhost. On Windows its usually located at C:\Windows\System32\drivers\etc, on Linux it lives at /etc/hosts, e.g.:

127.0.0.1 my-app.dev

Then setup a proxy server on your machine and configure your phone to use that as its proxy.

You should then be able to access your app via your phone's browser using the hostname specified above as URL.

Profitsharing

Answer 12

In Some Cases the Mobile browser Refuses to Connect or Connection Timed-Out. In such Cases follow these Simple Steps(Windows Users).

1. Go to Windows Defender Firewall
2. Click on Advanced Settings
3. Select Inbound Rules
4. Next, New Rule
5. Then, Port > All Local Ports(TCP Checked) > Allow All Connections > Give Any Name > Done!

reactapp windowsfirewall localhost

Howlond

On Windows, in combination with setting your Wifi connection to private, do this, but probably only open a single port. – Hopefully

Answer 13

When you using create-react-app and then yarn start that link you a IP network

But that does not work for me, so:

1. Open a terminal then ipconfig
2. Find under your wifi adapter are you using IPv4 : youIpNumber
3. http://yourIpNumber:3000 //Note you must add the PORT

Teakettle

Answer 14

The easiest way is to just use a tunnel to your local port and replace "localhost:" with the tunnel url. The tunnel url is accessible from anywhere (as far as I know). I use ngrok for this. Ngrok documentation is pretty straightforward for getting started. https://ngrok.com/docs

Cinelli

Answer 15

In windows, open command prompt and type

ipconfig

You will get a list where you can find the ip address. Copy the ip address and add :3000 to the end. Now you can use this link to preview the app in a phone.

In Ubuntu, open terminal(Ctrl+Alt+T) and type

hostname -I

It will give your ip address.

Evaporite

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Walleye

Answer 16

When you do yarn dev, use the flag --host.

yarn dev --host 

This will expose the network and you can access it on the devices on the same network.

Yaekoyael

Answer 17

In my case, I right clicked on the wifi I was connected to and then I went to the properties of the connected Wifi. There I saw my ipv4 address and I typed this IP along with port 3000 mobile phone like this 192.168.100.207:3000 and it worked.

Edit: You would also need to set the network profile type to private in the connected Wifi properties.

Degrading