Wie kann ein Port angegeben werden, um ein auf einer App basierendes Projekt auszuführen?

208

Mein Projekt basiert auf der Create-React-App . npm startoder yarn startstandardmäß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 3005und eines im Port3006

letthefireflieslive
quelle
4
Erwähnen Sie hier nur kurz, dass Sie für Next.js-Projekte nur verwenden, next -p 3005wenn jemand anderes hierher kommt und nach dem gleichen sucht.
Giovannipds

Antworten:

393

Wenn Sie die Umgebungsvariable nicht festlegen möchten, können Sie den scriptsTeil von package.json folgendermaßen ändern :

"start": "react-scripts start"

zu

Linux (getestet unter Ubuntu 14.04 / 16.04) und MacOS (getestet von @ aswin-s unter MacOS Sierra 10.12.4):

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

oder (möglicherweise) eine allgemeinere Lösung von @IsaacPak

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

Windows @ JacobEnsor-Lösung

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

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 .envDatei gespeichert sind (nützlich, um Variablensätze für verschiedene deployKonfigurationen in einer bequemen und lesbaren Form zu speichern ). Vergessen Sie nicht , hinzuzufügen , *.envin , .gitignorewenn Sie noch Ihre Geheimnisse bei der Speicherung von .envDateien. 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.

El Ruso
quelle
33
für Windows:"start": "set PORT=3005 && react-scripts start"
Jacob Ensor
3
für Ubuntu: "start": "export PORT=3006 react-scripts start"arbeitete für mich
Isaac Pak
Für Windows Set PORT = 3005 &&
React
2
"start": "export PORT=3001 && react-scripts start"Dieser arbeitete für mich in Ubuntu 16
Code Cooker
2
@ ElRuso Wenn das Projekt nur in einer bestimmten Umgebung verwendet wird, stimme ich zu, es ist übertrieben. Der Anwendungsfall für so etwas cross-envist, 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.
MauricioLeal
131

Hier ist eine andere Möglichkeit, diese Aufgabe zu erfüllen.

Erstellen Sie eine .envDatei in Ihrem Projektstamm und geben Sie dort die Portnummer an. Mögen:

PORT=3005
Shahriar Hasan Sayeed
quelle
2
Die Verwendung einer .env-Datei wird standardmäßig mit der create-react-app unterstützt. Stellen Sie nur sicher, dass Sie .env nicht in die Quellcodeverwaltung einchecken, wenn Sie vertrauliche Informationen eingeben.
Don
11
Dies
Travis Steel vom
3
@carkod Eigentlich sagen sie, sensible Daten in eine andere Datei als zu legen .env. In ihrem Fall empfehlen sie, mit .env.localdenen Sie nicht in die Quellcodeverwaltung einchecken sollten, damit Sie sicher .envin die Quellcodeverwaltung einchecken können. Es gilt also immer noch der gleiche Rat.
Don
1
Diese Antwort gefällt mir besser, da sie die verfügbaren Konfigurationsoptionen nutzt, während sich die anderen Lösungen eher wie Tricks / Hacks anfühlen.
Hans Wouters
1
Dies funktioniert unter MacOSX und Windows mit derselben Datei package.json.
Keith John Hutchison
24

Sie können cross-env verwenden , um den Port festzulegen , und er funktioniert unter Windows, Linux und Mac.

yarn add -D cross-env

dann könnte in package.json der Startlink so aussehen:

"start": "cross-env PORT=3006 react-scripts start",
Aguinaldo Possatto
quelle
Genau das brauchte ich. Etwas, das auf den meisten gängigen Plattformen gut funktionieren kann, zum Beispiel ist mein Heim-Setup Windows und die Arbeit ist Mac.
icosmin
22

Sie können eine Umgebungsvariable mit dem Namen PORTangeben, um den Port anzugeben, auf dem der Server ausgeführt wird.

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell
Harshil Lodhi
quelle
1
Ich werde zwei Reaktionsanwendungen ausführen, eine muss sich auf Port 3005 befinden und die andere sollte sich auf 3006 befinden
letthefireflieslive
1
@lem Sie können zwei Konsolen öffnen, Umgebungsvariablen in jeder auf 3005 und 3006 setzen und die Anwendung ausführen.
Harshil Lodhi
1
"start": "set PORT=3005 react-scripts start"
Stellen Sie
5
@legnoban Fügen Sie zwischen den beiden Befehlen ein && ein. "start": "set PORT=3005 && react-scripts start"
Jacob Ensor
5

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

 node_modules/react-scripts/scripts/start.js

Suchen Sie darin nach der folgenden Zeile und ändern Sie die Portnummer in den gewünschten Port

 var DEFAULT_PORT = process.env.PORT || *4000*;

Und du bist gut zu gehen.

Ayodeji
quelle
13
Achtung: Änderungen, die Sie im node_modulesVerzeichnis vornehmen , werden weggeblasen, wenn die Pakete aktualisiert werden. Wahrscheinlich am besten eine der anderen Antworten verwenden.
Don
upvoted, weil es Einblick gibt, wo sie diese Datei gesetzt haben (endete hier, als ich einfach versuchte zu verstehen, was create-react-app hinter dem Vorhang macht)
ozgeneral
4

Erstellen Sie eine Datei mit Namen .envim Hauptverzeichnis package.jsonund setzen Sie die PORTVariable auf die gewünschte Portnummer.

Beispielsweise:

.env

PORT=4200
Muhammed Ozdogan
quelle
Dies funktioniert auch ohne Auswurf und ist die in der Dokumentation beschriebene Methode
Akshay Vijay Jain
@AkshayVijayJain Vielen Dank für Ihr Feedback. Ich habe die Antwort bearbeitet.
Muhammed Ozdogan
3

Aktualisiere einfach ein bisschen in webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

dann npm startwieder laufen .

Sanchit Bhatnagar
quelle
3

package.jsonGehen Sie in Ihrem zu Skripten und verwenden Sie --port 4000oder set PORT=4000, wie im folgenden Beispiel:

package.json (Windows):

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (Ubuntu):

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}
Lionel
quelle
2
Erwägen Sie, eine kleine Prosa hinzuzufügen, um die Absicht Ihres Codes zu erklären.
Entpnerd
2

Dies funktioniert sowohl unter Windows als auch unter Linux

package.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

Sie ziehen es jedoch vor, .env mit PORT = 3006 zu erstellen

Metu
quelle
Das funktioniert unter Windows nicht:'PORT' is not recognized as an internal or external command, operable program or batch file.
mgPePe
Vielen Dank für den Hinweis. Ich habe den Befehl behoben, Sie können es jetzt versuchen.
Metu
1

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.4

Refayat Haque
quelle
1

Zusammenfassend haben wir drei Ansätze, um dies zu erreichen:

  1. Legen Sie eine Umgebungsvariable mit dem Namen "PORT" fest.
  2. Ändern Sie den Schlüssel "start" unter "scripts" in package.json
  3. Erstellen Sie eine .env-Datei und fügen Sie die PORT-Konfiguration ein

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

mikaelfs
quelle
1

Sie finden die Standardportkonfiguration beim Starten Ihrer App

yourapp / scripts / start.js

Scrollen Sie nach unten und ändern Sie den Port nach Ihren Wünschen

const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 4000;

hoffe das kann dir helfen;)

Akhisyabab
quelle
Es gibt kein
Skriptverzeichnis
1
Damit diese Antwort funktioniert, müssen Sie yarn ejectzuerst.
Zach Bloomquist
1

Versuche dies:

npm start port=30022
Oben Desmond
quelle
Arbeiten Sie nicht für mich in der Ubuntu-Maschine (Digital Ocean)
Lingar
0

Es wäre schön, einen anderen Port 3000als einen Befehlszeilenparameter oder eine Umgebungsvariable angeben zu können .

Im Moment ist der Prozess ziemlich kompliziert:

  1. Lauf npm run eject
  2. Warten Sie, bis das beendet ist
  3. Bearbeiten scripts/start.jsund suchen / ersetzen Sie 3000durch den Port, den Sie verwenden möchten
  4. Bearbeiten config/webpack.config.dev.jsund das Gleiche tun
  5. npm start
MD.ALIMUL Alrazy
quelle
Ja, ich möchte in der Lage sein, Port als Befehlszeilenvariable anzugeben (nur), wenn ich einen anderen Server habe, der bereits 3000 verwendet.
SherylHohman
0

In Windows kann dies auf zwei Arten erfolgen.

  1. 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;

  2. 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.

rahulnikhare
quelle
0

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 4000obigen Beispielwerts verwenden .

Selçuk
quelle
0

Falls Sie dies bereits getan haben npm run eject, gehen Sie zu scripts / start.js und ändern Sie den Port in const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(in diesem Fall 3000) in den gewünschten Port.

Gaurav Singh
quelle
-1

Ändern des Standardports in React-App

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

Gehen Sie zu dieser Zeile:

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

Ändern Sie die Portnummer mit Ihrer Portnummer

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

Beispielsweise:

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3100;

Speichern und schließen

nu11secur1ty
quelle
3
Diese Änderung ist natürlich nur für Sie verfügbar und wird möglicherweise beim nächsten Start zerstört npm/yarn install. Das Ändern von Dateien node_modulessollte vermieden werden.
MEMark