How to make React app preview on mobile?
ReactjsNetworkingCreate React-AppReactjs Problem Overview
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?
Reactjs Solutions
Solution 1 - Reactjs
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/
Solution 2 - Reactjs
All answers are correct, except two points that are forgotten:
-
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
-
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
Solution 3 - Reactjs
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
Solution 4 - Reactjs
- Type ipconfig in your cmd...
- See your public ip
- Type that public IP in your mobile web browser with Port no. E.g: 192.168.0.175:3000/your_route
- Enjoy( just make sure you are connected to same wifi )
Solution 5 - Reactjs
For windows:
- 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. - 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.
Solution 6 - Reactjs
-
Type in cmd (windows):
ipconfig
-
Look for IP address IPV4:
-
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:
- 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.
Solution 7 - Reactjs
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)
- Run your react-app server(webpack-dev-server for webpack).
- Get your local ip using this command
ip route get 1.2.3.4 | awk '{print $7}'
, you can get your ip in windows usingipconfig
as ipv4 address. - Now simply put
http://<local-ip>:<port-number>
something likehttp://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.
Solution 8 - Reactjs
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
Solution 9 - Reactjs
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.
Solution 10 - Reactjs
When you using create-react-app and then yarn start that link you a IP network
But that does not work for me, so:
- Open a terminal then ipconfig
- Find under your wifi adapter are you using IPv4 : youIpNumber
- http://yourIpNumber:3000 //Note you must add the PORT
Solution 11 - Reactjs
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
Solution 12 - Reactjs
The easiest way is to just use a tunnel to your local port and replace "localhost:
Solution 13 - Reactjs
After running the npm/yarn start command, your page will be served on a single network adapter, you'll get the IP address of that network adapter with the port on the terminal. Here's what you'll see :
Local: http://localhost:3000
On Your Network: http://xxx.xxx.xxx.xxx:3000 //here you'll get the IP of the network adapter
Note that the development build is not optimized.
To create a production build, use npm run build.
assets by path static/ 1.52 MiB
asset static/js/bundle.js 1.47 MiB [emitted] (name: main) 1 related asset
asset static/media/logo.28fc72848be959690352.png 38.3 KiB [emitted] [immutable] [from: src/logo.png] (auxiliary name: main)
asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.87 KiB [emitted] 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 534 bytes [emitted]
cached modules 1.36 MiB (javascript) 38.3 KiB (asset) 31.3 KiB (runtime) [cached] 122 modules
webpack 5.65.0 compiled successfully in 2435 ms
But, in case you're using a different network adapter to connect the device, then just create a .env
file and define the HOST with that IP address, e.g. HOST=172.20.10.1
.
Solution 14 - Reactjs
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]