Come specificare una porta per eseguire un progetto basato su crea-reactjs-app?

Il mio progetto è basato su crea-react-app . npm start o yarn start di default eseguirà l’applicazione sulla porta 3000 e non vi è alcuna possibilità di 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 il test), uno nella porta 3005 e l’altro è 3006

Se non si desidera impostare la variabile di ambiente , un’altra opzione è quella di modificare la parte degli scripts di package.json da:

 "start": "react-scripts start" 

a

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 (può essere) soluzione più generale da @IsaacPak

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

Windows @JacobEnsor soluzione

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

Aggiornamento dovuto alla popolarità della mia risposta: Attualmente preferisco utilizzare le variabili di ambiente salvate nel file .env (utile per memorizzare serie di variabili per diverse configurazioni di deploy in una forma comoda e leggibile). Non dimenticare di aggiungere *.env in *.env se stai ancora memorizzando i tuoi segreti in file .env . Ecco la spiegazione del perché utilizzare le variabili di ambiente è migliore nella maggior parte dei casi. Ecco la spiegazione del perché archiviare segreti nell’ambiente è una ctriggers idea.

Ecco un altro modo per portare a termine questo compito.

Creare un file .env nella root del progetto e specificare il numero di porta lì. Piace:

PORT = 3005

È ansible specificare una variabile di ambiente denominata PORT per specificare la porta su cui verrà eseguito il server.

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

È ansible 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 di avvio potrebbe essere come questo:

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

Per le mie persone di Windows ho scoperto un modo per cambiare la porta ReactJS per l’esecuzione su qualsiasi porta che desideri. Prima di eseguire il server vai a

 node_modules/react-scripts/scripts/start.js 

In essa, cerca la riga sottostante e cambia il numero della porta nella porta desiderata

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

E tu sei bello andare.

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

In questo momento, il processo è abbastanza coinvolto:

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

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

configurazione predefinita della porta all’avvio della tua app, puoi trovarla

  YourApp / scripts / start.js 

scorrere verso il basso e cambiare porta come si desidera

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

la speranza può aiutarti;)

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

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

quindi eseguire npm start

Per riassumere, abbiamo tre approcci per realizzare questo:

  1. Imposta una variabile di ambiente denominata “PORT”
  2. Modificare la chiave “start” nella parte “scripts” di package.json
  3. Crea un file .env e inserisci la configurazione PORT in esso

Il più portatile sarà l’ultimo approccio. Ma come detto da altri poster, aggiungi .env in .gitignore per non caricare la configurazione nel repository pubblico.

Maggiori dettagli: questo articolo