Geben Sie den Port zum Ausführen von Create-React-App auf Localhost an

1. Richten Sie das Projekt create-react-app ein
2. Geben Sie den Port zum Ausführen von create-react-app auf Localhost an
3. Ändern Sie den Port des Projekts create-react-app
4. Ändern Sie den Port des Projekts create-react-app mit dem Paket cross-env

Facebook ist eine Organisation, die React entwickelt und gepflegt hat. Dasselbe Team veröffentlichte das Paket create-react-app, das eine hervorragende Umgebung für die Entwicklung von React-Apps bietet.

Sie können sich auf das Schreiben von JSX- und JavaScript-Code konzentrieren, ohne sich um die Einrichtung von Webpaketen, Transpilern und anderen modernen Tools kümmern zu müssen. Sie können eine React Single-Page-Anwendung mit nur wenigen Befehlen über npm erstellen.

Richten Sie das Projekt create-react-app ein

Entwickler müssen mithilfe von Tools wie npm oder Garn einen Befehl eingeben. Die mit create-react-app erstellte Anwendung wird auf dem localhost verfügbar sein, wo Sie eine Vorschau Ihrer Anwendung anzeigen können, indem Sie zu localhost:3000 gehen.

Geben Sie den Port zum Ausführen von create-react-app auf Localhost an

Lokal gehostete Anwendungen befinden sich nicht auf einem Remote-Server, sondern auf Ihrem Computer und können nicht von Geräten aufgerufen werden, die nicht mit Ihrem Netzwerk verbunden sind.

Manchmal müssen Sie zwei Anwendungen auf localhost ausführen, daher muss es eine Möglichkeit für den Browser geben, verschiedene Anwendungen auf verschiedenen localhost-Adressen anzuzeigen.

Normalerweise verwenden wir Ports in lokalen Netzwerken, um zwischen zwei verschiedenen Anwendungsinstanzen auf Ihrem lokalen Host zu unterscheiden. Anwendung A könnte auf localhost:3000 gehostet werden, während Anwendung B auf localhost:3006 sein könnte.

Sobald Sie ein create-react-app-Projekt erstellt haben und es starten möchten, wird es standardmäßig auf der localhost:3000-Adresse gehostet; die 3000 ist hier der Hafen. Beim Starten einer create-react-app-Anwendung fordert npm Sie nicht auf, den Port zum Ausführen der Anwendung anzugeben.

Wenn Sie bereits eine React-Anwendung auf Ihrem Gerät ausführen und versuchen, eine andere zu starten, verwendet diese nicht automatisch einen anderen Port, um sie zu hosten. Stattdessen erhalten Sie eine Fehlermeldung, die Ihnen mitteilt, dass die Anwendung bereits auf diesem Port ausgeführt wird.

Daher benötigen Sie möglicherweise eine Möglichkeit, anzugeben, dass ein bestimmtes create-react-app-Projekt auf einem anderen Port ausgeführt werden soll. Auf diese Weise können Sie zwei create-react-app-Projekte gleichzeitig laufen lassen.

Ändern Sie den Port des Projekts create-react-app

Um den Port der Anwendung zu ändern, müssen Sie in das Projektverzeichnis gehen und eine package.json-Datei suchen. Es befindet sich im Hauptverzeichnis des Projekts und ist daher nicht schwer zu finden.

Sobald Sie die Datei geöffnet haben, finden Sie den Abschnitt "scripts", der die Befehle steuert, die zum Starten einer Anwendung verwendet werden, wie z. B. npm start.

Ändern Sie den Port unter Windows

Sofern Sie keine Änderungen vornehmen, sieht dieser Abschnitt in etwa so aus:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Sie können den Port jedoch bei Bedarf angeben. Dazu müssen Sie den Wert der Eigenschaft "start" ändern.

Wenn Sie beispielsweise möchten, dass die Anwendung auf dem Port 8000 ausgeführt wird, können Sie die folgenden Änderungen vornehmen:

"scripts": {
    "start": "set PORT=8000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Wie Sie sehen, haben wir am Anfang den set PORT=8000 hinzugefügt und den &&-Operator verwendet, um ihn mit dem vorherigen Wert zu verbinden.

Mehr braucht es nicht, um den Standardport eines create-react-app-Projekts unter Windows zu ändern. Wenn Sie die Anwendung jetzt ausführen, wird sie im Browser unter der Adresse localhost:8000 geöffnet.

Ändern Sie den Port unter Linux/Mac

Unter Linux und Mac können Sie den standardmäßigen Localhost-Port ändern, indem Sie den Abschnitt "scripts" der Datei package.json wie folgt ändern:

"start": "PORT=3006 react-scripts start"

Wenn das bei Ihrer Linux- oder Mac-Version nicht funktioniert, können Sie Folgendes versuchen:

"start": "export PORT=3006 react-scripts start"

Ändern Sie den Port des Projekts create-react-app mit dem Paket cross-env

Eine JavaScript-Community hat eine Möglichkeit entwickelt, Umgebungsvariablen wie PORT an einer Stelle zu setzen, und sie wird auf allen Plattformen ähnlich laufen.

Sie müssen das Paket mit npm als Dev-Abhängigkeit installieren. Achten Sie auf die richtige Schreibweise:

npm install --save-dev cross-env

Ändern Sie dann die Eigenschaft "start" im Abschnitt "scripts" auf den folgenden Wert:

"start": "cross-env PORT=3006 react-scripts start",

Derzeit befindet sich das Paket im Wartungsmodus, was bedeutet, dass keine neuen Funktionen hinzugefügt werden, aber es funktioniert immer noch.