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

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

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.

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

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",

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

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.

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

Beispielsweise:

.env

PORT=4200

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 .

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"
}

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

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

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

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;)

Versuche dies:

npm start port=30022

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

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.

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 .

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.

Ä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