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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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 ipconfig. 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/

Answer 5

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.