webentwicklung-frage-antwort-db.com.de

Wie mache ich React App Vorschau auf Handy?

Ich bin ein Noob mit create-react-app um eine App zu erstellen, yarn start Starten Sie den Server um http://localhost:3000/, Ich kann diese URL auf meinem Handy nicht besuchen. Wie kann ich einige Konfigurationen vornehmen, um eine Vorschau der App auf meinem Handy anzuzeigen?

reactjsnetworkingcreate-react-app
17
Liuuil

Denken Sie zunächst daran, dass Sie eine mobile Ansicht in einem Desktop-Browser öffnen können (zumindest in Chrome und Firefox). Weitere Informationen finden Sie unter Artikel . Dies ist kein Ersatz von Tests auf einem realen mobilen Gerät, kann Ihnen aber dabei helfen, offensichtlichere Probleme zu identifizieren.

Zweitens müssen Sie die IP-Adresse Ihres Computers in Ihrem lokalen Netzwerk verwenden (vorausgesetzt, Ihr Mobilgerät befindet sich im selben Netzwerk wie Ihr Desktop). Unter Linux und Mac können Sie Ihre IP mit ifconfig oder mit ipconfig unter Windows überprüfen. localhost bezieht sich immer auf den aktuellen Computer, d. h. localhost auf Ihrem Desktop zeigt auf Ihren Desktop und auf Ihrem mobilen Gerät auf Ihr mobiles Gerät. Aus diesem Grund können Sie nicht darauf zugreifen. Die App wird auf Ihrem Desktop ausgeführt und ist nicht mobil.

Sobald Sie die IP-Adresse Ihres Computers kennen, müssen Sie localhost durch diese ersetzen. In meinem Fall lautet die IP 192.168.1.10, daher verwende ich die folgende Adresse, um auf meine App zuzugreifen:

http://192.168.1.10:3000/
20
Greg Navis

Wenn Sie es auf einem tatsächlichen Gerät testen möchten (dies wird empfohlen), sollten Sie sicherstellen, dass Ihr Mobiltelefon mit demselben Netzwerk verbunden ist wie Ihr Computer und dann, wenn Sie es ausführen

yarn start
npm run start

Sie sollten so etwas sehen:

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

Geben Sie diese IP-Adresse einfach in Ihren mobilen Browser ein und testen Sie Ihre Webanwendung

9
Miguel
  1. Geben Sie ipconfig in Ihr cmd ein ...
  2. Sehen Sie Ihre öffentliche IP
  3. Geben Sie diese öffentliche IP in Ihrem mobilen Webbrowser mit Port-Nr. Zum Beispiel: 192.168.0.175:3000/your_route
  4. Genießen
4
Coderboi

Für Windows:

  1. Finden Sie Ihre öffentliche IP mit ipconfig in cmd. Die IPv4-Adresse finden Sie unter WLAN-Adapter Wi-Fi. Stellen Sie sicher, dass sich Ihr Telefon und Ihr PC im selben LAN befinden (stellen Sie eine Verbindung zu demselben WLAN her). Verwenden http://your_ip:3000, um eine Vorschau Ihrer Reaktions-App anzuzeigen.
  2. Tipps: Sie müssen das Protokoll https verwenden, um den GPS-Dienst Ihres Telefons zu testen. In meinem Fall habe ich es auf Heroku bereitgestellt, um die Funktionen mithilfe von GPS zu testen.
3
zsl_0

Fügen Sie Ihrer hosts -Datei einen Hostnamen hinzu, der auf localhost verweist. Unter Windows befindet es sich normalerweise unter C:\Windows\System32\drivers\etc, unter Linux lebt es bei /etc/hosts, z.B.:

127.0.0.1 my-app.dev

Richten Sie dann einen Proxyserver auf Ihrem Computer ein und konfigurieren Sie Ihr Telefon so, dass dieser als Proxy verwendet wird.

Sie sollten dann über den Browser Ihres Telefons unter dem oben als URL angegebenen Hostnamen auf Ihre App zugreifen können.

1
falloutghst

Wenn Sie die Create-React-App verwenden und dann Garn starten, verbinden Sie sich mit einem IP-Netzwerk

Aber das funktioniert bei mir nicht, also:

  1. Öffnen Sie ein Terminal und dann ipconfig
  2. Finden Sie unter Ihrem WLAN-Adapter heraus, ob Sie IPv4 verwenden: youIpNumber
  3. http: // yourIpNumber: 30 // Beachten Sie, dass Sie den PORT hinzufügen müssen
1
Ivan Vilches Basaul

Alle Antworten sind richtig, mit Ausnahme von zwei Punkten, die vergessen werden:

  1. ihr Netzwerk muss privat sein: Klicken Sie unter Windows 10 auf das WLAN-Symbol und dann auf den Netzwerknamen. Die Option Eigenschaften wird angezeigt. Klicken Sie darauf Setzen Sie es dann im Abschnitt Netzwerkprofil auf Privat

  2. möglicherweise können Sie keine Verbindung über die IP-Adresse herstellen, die npm run start schreibt in das cmd, probiere auch deine anderen IP-Adressen aus. Wie andere Freunde erwähnt haben, öffnen Sie cmd, geben Sie Folgendes ein: ipconfig und drücken Sie die Eingabetaste. Dann sehen Sie 3 Teile, die alle eine Zeile haben mit: IPv4-Adresse , versuchen Sie alle diese IP-Adressen mit der Portnummer Ihrer Reaktionsanwendung, ich hoffe, es hilft

0
Mahdieh Shavandi