How to make React app preview on mobile?

To preview your React application on a mobile device, you can follow these steps:

1. Launch your React application on your development machine

Typically, running npm start or yarn start launches the application and starts a development server by default on localhost:3000.

2. Ensure your mobile device and development machine are on the same local network

Your mobile device and development machine must be on the same local network for the mobile device to access the service running on the development machine.

3. Find the IP address of your development machine

Locate the local network IP address of your development machine. On Windows, run ipconfig in the Command Prompt. On macOS or Linux, run ifconfig or ip a in the Terminal.

4. Enter the URL in your mobile browser

Enter the URL http://<IP>:<port> in your mobile browser. For example, if your IP address is 192.168.1.5 and the React application is running on port 3000, you should enter http://192.168.1.5:3000.

5. Troubleshoot potential access issues

• If your firewall settings block access from external devices, adjust the settings to allow access.
• Ensure your development server is configured to listen on the local network, not just localhost.

6. For React Native development (if applicable)

If you are developing a mobile application with React Native, use Expo or the React Native CLI to preview your application. Expo provides a QR code scanning feature that allows you to preview your React Native application directly on your mobile device using the Expo client app.

Example:

Suppose I am developing a weather application and want to preview it on my iPhone. I follow these steps:

1. I ran npm start on my MacBook, and the application successfully launched on localhost:3000.
2. I ensured my MacBook and iPhone are connected to the same Wi-Fi network.
3. I opened Terminal on my MacBook, ran ifconfig, and found my IP address, for example 192.168.1.5.
4. I entered http://192.168.1.5:3000 in the Safari browser on my iPhone.
5. I checked the Mac's System Preferences to ensure the firewall allows incoming connections.
6. I successfully loaded my weather application on the iPhone and interacted with it as in a desktop browser.

By doing this, I can test and preview my React application on a real mobile device, which is very helpful for checking responsive design and mobile interaction performance.