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

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/ 

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