Come specificare una porta per eseguire un progetto basato su create -eagire-app?

Il mio progetto si basa su create -eagire-app . npm starto yarn startper impostazione predefinita eseguirà l'applicazione porta 3000 e non è possibile specificare una porta in package.json.

Come posso specificare una porta di mia scelta in questo caso? Voglio eseguire due di questo progetto contemporaneamente (per i test), uno in porto 3005e l'altro3006

Se non si desidera impostare la variabile di ambiente , un'altra opzione è quella di modificare la scriptsparte di package.json da:

"start": "react-scripts start"

per

Linux (testato su Ubuntu 14.04 / 16.04) e MacOS (testato da @ aswin-s su MacOS Sierra 10.12.4):

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

o (potrebbe essere) una soluzione più generale di @IsaacPak

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

Soluzione Windows @JacobEnsor

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

cross-env lib funziona ovunque. Vedi la risposta di Aguinaldo Possatto per i dettagli

Aggiornamento a causa della popolarità della mia risposta: attualmente preferisco utilizzare le variabili di ambiente salvate nel .envfile (utile per memorizzare gruppi di variabili per diverse deployconfigurazioni in una forma comoda e leggibile). Non dimenticate di aggiungere *.envin .gitignorese si sta ancora memorizzare i tuoi segreti in .envfile. Ecco la spiegazione del perché l'uso delle variabili di ambiente è migliore nella maggior parte dei casi. Ecco la spiegazione del perché conservare segreti nell'ambiente è una cattiva idea.

Ecco un altro modo per svolgere questo compito.

Creare un .envfile nella radice del progetto e specificare il numero di porta lì. Piace:

PORT=3005

È possibile utilizzare cross-env per impostare la porta e funzionerà su Windows, Linux e Mac.

yarn add -D cross-env

quindi in package.json il link iniziale potrebbe essere così:

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

È possibile specificare una variabile di ambiente denominata PORTper specificare la porta su cui verrà eseguito il server.

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

Per la mia gente di Windows ho scoperto un modo per cambiare la porta ReactJS per funzionare su qualsiasi porta desiderata. Prima di eseguire il server, andare su

 node_modules/react-scripts/scripts/start.js

In esso, cerca la riga seguente e modifica il numero di porta sulla porta desiderata

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

E sei a posto.

Creare un file con il nome .envnella directory principale oltre package.jsone impostarePORT variabile sul numero di porta desiderato.

Per esempio:

.env

PORT=4200

Basta aggiornare un po 'in webpack.config.js:

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

poi corri di npm startnuovo.

Nel tuo package.json, vai agli script e usa --port 4000o set PORT=4000, come nell'esempio seguente:

package.json (Finestre):

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

package.json (Ubuntu):

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

Funziona su Windows e Linux

package.json

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

ma preferibilmente preferisci creare .env con PORT = 3006 scritto al suo interno

La modifica del mio file package.json ha "start": "export PORT=3001 && react-scripts start"funzionato anche per me e sono su macOS 10.13.4

Per riassumere, abbiamo tre approcci per raggiungere questo obiettivo:

1. Imposta una variabile di ambiente denominata "PORT"
2. Modificare la chiave "start" nella parte "script" di package.json
3. Creare un file .env e inserirvi la configurazione PORT

Quello più portatile sarà l'ultimo approccio. Ma come menzionato da altri poster, aggiungi .env in .gitignore per non caricare la configurazione nel repository di sorgenti pubbliche.

Maggiori dettagli: questo articolo

puoi trovare la configurazione della porta predefinita all'avvio della tua app

YourApp / scripts / start.js

scorrere verso il basso e cambiare la porta come desiderato

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

spero che questo possa aiutarti;)

Prova questo:

npm start port=30022

Sarebbe bello poter specificare una porta diversa da 3000 , come parametro della riga di comando o come variabile d'ambiente.

In questo momento, il processo è piuttosto coinvolto:

1. Correre npm run eject
2. Aspetta che finisca
3. Modifica scripts/start.jse trova / sostituisci 3000con qualsiasi porta desideri utilizzare
4. Modifica config/webpack.config.dev.jse fai lo stesso
5. npm start

In Windows può essere fatto in 2 modi.

1. In "\ node_modules \ reazioni-script \ scripts \ start.js", cerca "DEFAULT_PORT" e aggiungi il numero di porta desiderato.

   Ad esempio: const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. In package.json, aggiungi la riga seguente. "start": "set PORT = 9999 && reply-scripts start" Quindi avvia l'applicazione usando NPM start. Avvierà l'applicazione nella porta 9999.

Che ne dite di dare il numero di porta mentre invocate il comando senza dover cambiare nulla nel codice dell'applicazione o nei file di ambiente? In questo modo è possibile eseguire e servire la stessa base di codice da più porte diverse.

piace:

$ export PORT=4000 && npm start

È possibile inserire il numero di porta desiderato al posto del valore di esempio 4000sopra.

Nel caso in cui lo abbiate già fatto npm run eject, andate su script / start.js e cambiate la porta const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 in questo caso) nella porta che volete.

Modifica della porta predefinita su React-App

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

Vai a questa linea:

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

Modificare il numero di porta con il proprio numero di porta

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

Per esempio:

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

Salva ed esci