web-dev-qa-db-fra.com

Comment spécifier un port pour exécuter un projet basé sur create-react-app?

Mon projet est basé sur create-react-app . npm start ou yarn start exécutera par défaut l'application sur port 3000 et il n'y a aucune option permettant de spécifier un port dans le package.json. 

Comment puis-je spécifier un port de mon choix dans ce cas? Je veux exécuter deux projets simultanément (à des fins de test), un dans le port 3005 et l'autre est 3006

reactjsnpm
84
Lemuel Nabong

Si vous ne souhaitez pas définir la variable d'environnement , vous pouvez également modifier la partie scripts de package.json à partir de:

"start": "react-scripts start"

à

Linux (testé sur Ubuntu 14.04/16.04) et MacOS (testé par @ aswin-s sur MacOS Sierra 10.12.4): 

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

ou (peut être) une solution plus générale de @IsaacPak

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

Windows Solution @JacobEnsor

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

Update en raison de la popularité de ma réponse: Actuellement, je préfère utiliser les variables d'environnement enregistrées dans le fichier .env (utile pour stocker des ensembles de variables pour différentes configurations deploy sous une forme commode et lisible). N'oubliez pas d'ajouter *.env dans .gitignore si vous stockez toujours vos secrets dans des fichiers .env. Here explique pourquoi l'utilisation de variables d'environnement est préférable dans la plupart des cas. Here explique pourquoi le stockage de secrets dans l'environnement est une mauvaise idée.

155
El Ruso

Voici un autre moyen d'accomplir cette tâche.

Créez un fichier .env à la racine de votre projet et spécifiez-y le numéro de port. Comme:

PORT = 3005

63
Shahriar Hasan Sayeed

Vous pouvez spécifier une variable d'environnement nommée PORT pour spécifier le port sur lequel le serveur s'exécutera. 

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

Vous pouvez utiliser cross-env pour définir le port, et cela fonctionnera sous Windows, Linux et Mac.

yarn add -D cross-env

alors dans package.json le lien de départ pourrait être comme ceci:

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

Juste mettre à jour un peu dans webpack.config.js:

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

puis relancez npm start

2
Sanchit Bhatnagar

Changer dans mon fichier package.json "start": "export PORT=3001 && react-scripts start" a fonctionné pour moi aussi et je suis sur macOS 10.13.4

1
Refayat Haque

Pour mes utilisateurs Windows, j’ai découvert un moyen de changer le port de ReactJS pour l’exécuter sur n’importe quel port de votre choix. Avant d’exécuter le serveur, allez à 

node_modules/react-scripts/scripts/start.js

Dans celui-ci, recherchez la ligne ci-dessous et remplacez le numéro de port par le port de votre choix.

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

Et vous êtes prêt à partir.

1
Ayodeji

Cela fonctionne sous Windows et Linux

package.json 

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

mais vous préférez probablement créer .env avec PORT = 3006 écrit à l'intérieur

0
Metu

vous pouvez trouver la configuration de port par défaut au démarrage de votre application 

votre application/scripts/start.js

faites défiler vers le bas et changez le port pour ce que vous voulez

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

espérons que cela peut vous aider;)

0
akhisyabab

Sous Windows, cela peut être fait de 2 manières.

  1. Sous "\ node_modules\react-scripts\scripts\start.js", recherchez "DEFAULT_PORT" et ajoutez le numéro de port souhaité.

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

  2. Dans package.json, ajoutez la ligne ci-dessous. "start": "set PORT = 9999 && react-scripts start" Puis lancez l'application avec NPM start. Il va démarrer l'application dans le port 9999.

0
rahulnikhare

Pourquoi ne pas donner le numéro de port tout en appelant la commande sans rien changer à votre code d'application ou à vos fichiers d'environnement? De cette façon, il est possible d'exécuter et de servir la même base de code à partir de plusieurs ports différents.

comme:

$ export PORT=4000 && npm start

Vous pouvez mettre le numéro de port de votre choix à la place de la valeur d'exemple 4000 ci-dessus.

0
Selçuk

Pour résumer, nous avons trois approches pour y parvenir:

  1. Définir une variable d'environnement nommée "PORT"
  2. Modifier la clé "start" sous "scripts" de package.json
  3. Créez un fichier .env et mettez-y la configuration PORT

Le plus portable sera la dernière approche. Mais comme mentionné par d’autres affiches, ajoutez .env dans .gitignore afin de ne pas télécharger la configuration dans le référentiel source public.

Plus de détails: cet article

0
mikaelfs

Il serait agréable de pouvoir spécifier un port autre que 3000, en tant que paramètre de ligne de commande ou variable d’environnement.

En ce moment, le processus est plutôt impliqué:

  1. Exécuter npm run eject
  2. Attendez que cela se termine
  3. Éditez scripts/start.js et trouvez/remplacez 3000 avec le port que vous souhaitez utiliser
  4. Éditez config/webpack.config.dev.js et faites la même chose
  5. npm start
0
MD.ALIMUL Alrazy