Mein Projekt basiert auf der Create-React-App . npm start
oder yarn start
standardmäßig wird die Anwendung auf Port 3000 ausgeführt, und es gibt keine Möglichkeit, einen Port in der Datei package.json anzugeben.
Wie kann ich in diesem Fall einen Port meiner Wahl angeben? Ich möchte zwei dieser Projekte gleichzeitig ausführen (zum Testen), eines im Port 3005
und eines im Port3006
next -p 3005
wenn jemand anderes hierher kommt und nach dem gleichen sucht.Antworten:
Wenn Sie die Umgebungsvariable nicht festlegen möchten, können Sie den
scripts
Teil von package.json folgendermaßen ändern :zu
Linux (getestet unter Ubuntu 14.04 / 16.04) und MacOS (getestet von @ aswin-s unter MacOS Sierra 10.12.4):
oder (möglicherweise) eine allgemeinere Lösung von @IsaacPak
Windows @ JacobEnsor-Lösung
cross-env lib funktioniert überall. Siehe Aguinaldo Possatto Antwort für Details
Update aufgrund der Beliebtheit meiner Antwort: Derzeit bevorzuge ich die Verwendung von Umgebungsvariablen, die in einer
.env
Datei gespeichert sind (nützlich, um Variablensätze für verschiedenedeploy
Konfigurationen in einer bequemen und lesbaren Form zu speichern ). Vergessen Sie nicht , hinzuzufügen ,*.env
in ,.gitignore
wenn Sie noch Ihre Geheimnisse bei der Speicherung von.env
Dateien. Hier ist die Erklärung, warum die Verwendung von Umgebungsvariablen in den meisten Fällen besser ist. Hier ist die Erklärung, warum das Speichern von Geheimnissen in der Umgebung eine schlechte Idee ist.quelle
"start": "set PORT=3005 && react-scripts start"
"start": "export PORT=3006 react-scripts start"
arbeitete für mich"start": "export PORT=3001 && react-scripts start"
Dieser arbeitete für mich in Ubuntu 16cross-env
ist, wenn mehrere Entwickler an verschiedenen Systemen arbeiten. Vielleicht bevorzugen einige MACs, andere bevorzugen Windows. In einem anderen Szenario verwenden alle Entwickler Windows, aber Sie möchten eine Umgebungsvariable hinzufügen, die auf Ihrem CI / CD-Server ausgeführt wird, auf dem Ubuntu ausgeführt wird. Ich hoffe das hilft.Hier ist eine andere Möglichkeit, diese Aufgabe zu erfüllen.
Erstellen Sie eine
.env
Datei in Ihrem Projektstamm und geben Sie dort die Portnummer an. Mögen:quelle
.env
. In ihrem Fall empfehlen sie, mit.env.local
denen Sie nicht in die Quellcodeverwaltung einchecken sollten, damit Sie sicher.env
in die Quellcodeverwaltung einchecken können. Es gilt also immer noch der gleiche Rat.Sie können cross-env verwenden , um den Port festzulegen , und er funktioniert unter Windows, Linux und Mac.
dann könnte in package.json der Startlink so aussehen:
quelle
Sie können eine Umgebungsvariable mit dem Namen
PORT
angeben, um den Port anzugeben, auf dem der Server ausgeführt wird.quelle
"start": "set PORT=3005 react-scripts start"
"start": "set PORT=3005 && react-scripts start"
Für meine Windows-Leute habe ich eine Möglichkeit gefunden, den ReactJS-Port so zu ändern, dass er auf jedem gewünschten Port ausgeführt wird. Bevor Sie den Server ausführen, gehen Sie zu
Suchen Sie darin nach der folgenden Zeile und ändern Sie die Portnummer in den gewünschten Port
Und du bist gut zu gehen.
quelle
node_modules
Verzeichnis vornehmen , werden weggeblasen, wenn die Pakete aktualisiert werden. Wahrscheinlich am besten eine der anderen Antworten verwenden.Erstellen Sie eine Datei mit Namen
.env
im Hauptverzeichnispackage.json
und setzen Sie diePORT
Variable auf die gewünschte Portnummer.Beispielsweise:
.env
quelle
Aktualisiere einfach ein bisschen in
webpack.config.js
:dann
npm start
wieder laufen .quelle
package.json
Gehen Sie in Ihrem zu Skripten und verwenden Sie--port 4000
oderset PORT=4000
, wie im folgenden Beispiel:package.json
(Windows):package.json
(Ubuntu):quelle
Dies funktioniert sowohl unter Windows als auch unter Linux
package.json
Sie ziehen es jedoch vor, .env mit PORT = 3006 zu erstellen
quelle
'PORT' is not recognized as an internal or external command, operable program or batch file.
Das Ändern meiner package.json-Datei
"start": "export PORT=3001 && react-scripts start"
hat auch bei mir funktioniert und ich bin unter macOS 10.13.4quelle
Zusammenfassend haben wir drei Ansätze, um dies zu erreichen:
Der tragbarste ist der letzte Ansatz. Fügen Sie, wie in einem anderen Poster erwähnt, .env zu .gitignore hinzu, um die Konfiguration nicht in das öffentliche Quell-Repository hochzuladen.
Weitere Details: dieser Artikel
quelle
Sie finden die Standardportkonfiguration beim Starten Ihrer App
Scrollen Sie nach unten und ändern Sie den Port nach Ihren Wünschen
hoffe das kann dir helfen;)
quelle
yarn eject
zuerst.Versuche dies:
quelle
Es wäre schön, einen anderen Port
3000
als einen Befehlszeilenparameter oder eine Umgebungsvariable angeben zu können .Im Moment ist der Prozess ziemlich kompliziert:
npm run eject
scripts/start.js
und suchen / ersetzen Sie3000
durch den Port, den Sie verwenden möchtenconfig/webpack.config.dev.js
und das Gleiche tunnpm start
quelle
In Windows kann dies auf zwei Arten erfolgen.
Suchen Sie unter "\ node_modules \ react-scripts \ scripts \ start.js" nach "DEFAULT_PORT" und fügen Sie die gewünschte Portnummer hinzu.
Beispiel: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;
Fügen Sie in package.json die folgende Zeile hinzu. "start": "set PORT = 9999 && react-scripts start" Starten Sie dann die Anwendung mit NPM start. Die Anwendung wird im 9999-Port gestartet.
quelle
Wie wäre es, wenn Sie beim Aufrufen des Befehls die Portnummer angeben, ohne Änderungen an Ihrem Anwendungscode oder Ihren Umgebungsdateien vornehmen zu müssen? Auf diese Weise ist es möglich, dieselbe Codebasis von mehreren verschiedenen Ports aus auszuführen und bereitzustellen.
mögen:
$ export PORT=4000 && npm start
Sie können die gewünschte Portnummer anstelle des
4000
obigen Beispielwerts verwenden .quelle
Falls Sie dies bereits getan haben
npm run eject
, gehen Sie zu scripts / start.js und ändern Sie den Port inconst DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
(in diesem Fall 3000) in den gewünschten Port.quelle
Ändern des Standardports in React-App
Gehen Sie zu dieser Zeile:
Ändern Sie die Portnummer mit Ihrer Portnummer
Beispielsweise:
Speichern und schließen
quelle
npm/yarn install
. Das Ändern von Dateiennode_modules
sollte vermieden werden.