webentwicklung-frage-antwort-db.com.de

Wie lege ich einen Port fest, um ein Projekt auf Basis einer Create-React-App auszuführen?

Mein Projekt basiert auf create -react-app . npm start oder yarn start führt standardmäßig die Anwendung auf port 3000 aus und es gibt keine Option, einen Port in 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), eine in Port 3005 und die andere ist 3006.

84
Lemuel Nabong

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

"start": "react-scripts start"

zu

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

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

oder (kann) eine allgemeinere Lösung von @IsaacPak sein

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

Windows @JacobEnsor-Lösung

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

Update aufgrund der Beliebtheit meiner Antwort: Derzeit verwende ich am besten Umgebungsvariablen, die in der Datei .env gespeichert sind (nützlich, um Variablensätze für verschiedene deploy-Konfigurationen in einer bequemen und lesbaren Form zu speichern). Vergessen Sie nicht, *.env in .gitignore hinzuzufügen, wenn Sie Ihre Geheimnisse immer noch in .env-Dateien speichern. Hier wird erklärt, 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.

155
El Ruso

Hier ist ein anderer Weg, um diese Aufgabe zu erledigen.

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

PORT = 3005

63

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

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell
17
Harshil Lodhi

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

yarn add -D cross-env

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

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

Aktualisiere einfach ein bisschen in webpack.config.js:

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

führen Sie dann erneut npm start aus

2

Das Ändern meiner package.json-Datei "start": "export PORT=3001 && react-scripts start" hat auch für mich funktioniert und ich bin auf macOS 10.13.4

1
Refayat Haque

Für meine Windows-Leute habe ich einen Weg gefunden, den ReactJS-Port so zu ändern, dass er an jedem beliebigen Port ausgeführt werden kann 

node_modules/react-scripts/scripts/start.js

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

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

Und du bist gut zu gehen.

1
Ayodeji

Dies funktioniert sowohl unter Windows als auch unter Linux

package.json

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

sie bevorzugen jedoch die Erstellung von .env-Dateien mit PORT = 3006

0
Metu

sie können die Standardport-Konfiguration beim Start Ihrer App finden 

yourapp/scripts/start.js

scrollen Sie nach unten und ändern Sie den Port nach Belieben

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

hoffe das kann dir helfen;)

0
akhisyabab

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 anschließend die Anwendung mit NPM start. Die Anwendung wird im 9999-Port gestartet.

0
rahulnikhare

Wie wäre es, wenn Sie die Portnummer beim Aufrufen des Befehls angeben, ohne Änderungen am Anwendungscode oder an den Umgebungsdateien vornehmen zu müssen? Auf diese Weise ist es möglich, dieselbe Codebasis von mehreren verschiedenen Ports aus auszuführen und zu bedienen.

mögen:

$ export PORT=4000 && npm start

Sie können die gewünschte Portnummer anstelle des obigen Beispielwerts 4000 eingeben.

0
Selçuk

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

  1. Setze eine Umgebungsvariable namens "PORT"
  2. Ändern Sie den "Start" -Schlüssel unter "Skripte" von package.json
  3. Erstellen Sie eine .env-Datei, und fügen Sie die PORT-Konfiguration hinzu

Der tragbarste wird der letzte Ansatz sein. Fügen Sie jedoch .enit.ore in .gitignore hinzu, um die Konfiguration nicht in das öffentliche Quell-Repository hochzuladen.

Weitere Details: dieser Artikel

0
mikaelfs

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

Im Moment ist der Prozess ziemlich kompliziert:

  1. npm run eject ausführen
  2. Warten Sie, bis der Vorgang abgeschlossen ist
  3. Bearbeiten Sie scripts/start.js und suchen/ersetzen Sie 3000 durch den Port, den Sie verwenden möchten
  4. Bearbeiten Sie config/webpack.config.dev.js und machen Sie dasselbe
  5. npm start
0