web-dev-qa-db-fra.com

Comment faire React aperçu de l'application sur mobile?

Je suis un noob utilisant create-react-app pour créer une application, yarn start démarrez le serveur à http://localhost:3000/, Je ne peux pas visiter cette URL sur mon mobile. Comment puis-je faire des configurations pour prévisualiser l'application sur mon mobile?

reactjsnetworkingcreate-react-app
9
Liuuil

Tout d'abord, n'oubliez pas que vous pouvez ouvrir une vue mobile dans un navigateur de bureau (au moins dans Chrome et Firefox). Voir l'article pour plus. Ce n'est pas un substitut de tests sur un véritable appareil mobile, mais peut vous aider à identifier les problèmes les plus évidents.

Deuxièmement, vous devez utiliser l'adresse IP de votre ordinateur dans votre réseau local (en supposant que votre appareil mobile se trouve sur le même réseau que votre bureau). Sous Linux et Mac, vous pouvez vérifier votre IP avec ipconfig. localhost fait toujours référence à la machine actuelle, c'est-à-dire localhost sur votre bureau pointe vers votre bureau et sur votre appareil mobile il pointe vers votre appareil mobile. C'est pourquoi vous ne pouvez pas y accéder - l'application s'exécute sur votre bureau et non mobile.

Une fois que vous connaissez l'adresse IP de votre ordinateur, vous devez remplacer localhost par celle-ci. Dans mon cas, l'IP est 192.168.1.10, j'utilise donc l'adresse suivante pour accéder à mon application:

http://192.168.1.10:3000/
12
Greg Navis

Si vous souhaitez le tester sur un appareil réel (c'est ce qui est recommandé), vous devez vous assurer que votre téléphone mobile est connecté au même réseau que votre ordinateur, puis lorsque vous exécutez

yarn start
npm run start

Vous devriez voir quelque chose comme ceci:

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

Il vous suffit de mettre cette adresse IP dans votre navigateur mobile et de tester votre application Web

6
Miguel

Pour les fenêtres:

  1. Trouvez votre IP publique en utilisant ipconfig en cmd. Trouvez l'adresse IPv4 sous Adaptateur LAN sans fil Wi-Fi. Assurez-vous que votre téléphone et votre ordinateur sont sur le même réseau local (connectez-vous au même réseau Wi-Fi). Utilisation http://your_ip:3000 pour prévisualiser votre application React.
  2. Conseils: Vous devez utiliser le protocole https pour tester le service GPS de votre téléphone. Pour mon cas, je l'ai déployé sur Heroku pour tester les fonctionnalités à l'aide du GPS.
2
zsl_0
  1. Tapez ipconfig dans votre cmd ...
  2. Voir votre IP publique
  3. Tapez cette adresse IP publique dans votre navigateur Web mobile avec le port no. Par exemple: 192.168.0.175:3000/your_route
  4. Prendre plaisir
2
Raju

Ajoutez un nom d'hôte à votre fichier hosts qui pointe vers localhost. Sous Windows, il est généralement situé à C:\Windows\System32\drivers\etc, sur Linux, il vit à /etc/hosts, par exemple.:

127.0.0.1 my-app.dev

Ensuite, configurez un serveur proxy sur votre machine et configurez votre téléphone pour l'utiliser comme proxy.

Vous devriez alors pouvoir accéder à votre application via le navigateur de votre téléphone en utilisant le nom d'hôte spécifié ci-dessus comme URL.

0
falloutghst

Lorsque vous utilisez create-react-app et que vous lancez ensuite un lien qui vous relie à un réseau IP

Mais cela ne fonctionne pas pour moi, alors:

  1. Ouvrez un terminal puis ipconfig
  2. Trouvez sous votre adaptateur wifi utilisez-vous IPv4: youIpNumber
  3. http: // yourIpNumber: 30 // Notez que vous devez ajouter le PORT
0
user1721