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 par défaut exécutera l’application sur le port 3000 et il n’est pas possible 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 de ces projets simultanément (pour les tests), l’un au port 3005 et l’autre au 3006

Si vous ne souhaitez pas définir la variable d’environnement , une autre option consiste à 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 par @IsaacPak

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

Solution Windows @JacobEnsor

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

Mise à jour en raison de la popularité de ma réponse: Actuellement, je préfère utiliser les variables d’environnement enregistrées dans .env fichier .env (utile pour stocker des ensembles de variables pour différentes configurations de deploy sous une forme pratique et lisible). N’oubliez pas d’append *.env dans .gitignore si vous .gitignore toujours vos secrets dans des fichiers .env . Voici l’explication de la raison pour laquelle l’utilisation des variables d’environnement est meilleure dans la plupart des cas. Voici l’explication de la raison pour laquelle le stockage de secrets dans l’environnement est une mauvaise idée.

Voici une autre façon d’accomplir cette tâche.

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

PORT = 3005

Vous pouvez spécifier une variable d’environnement nommée PORT pour spécifier le port sur lequel le serveur sera exécuté.

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

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

 yarn add -D cross-env 

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

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

Pour mes gens de Windows, j’ai découvert un moyen de changer le port ReactJS pour qu’il s’exécute sur n’importe quel port. Avant de lancer le serveur, allez à

 node_modules/react-scripts/scripts/start.js 

Dans ce document, 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.

Ce serait bien de pouvoir spécifier un port autre que 3000 , soit comme paramètre de ligne de commande, soit comme variable d’environnement.

Actuellement, le processus est assez compliqué:

  1. Exécuter npm run eject
  2. Attendez que ça finisse
  3. Modifiez les scripts/start.js et trouvez / remplacez 3000 avec le port que vous voulez utiliser
  4. Modifiez config/webpack.config.dev.js et faites la même chose
  5. npm start

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

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

  yourapp / scripts / start.js 

défiler vers le bas et changer de port comme vous le souhaitez

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

l’espoir peut vous aider;)

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 lancez npm start

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

  1. Définir une variable d’environnement nommée “PORT”
  2. Modifiez la clé “start” dans la partie “scripts” de package.json
  3. Créez un fichier .env et placez-y la configuration PORT

Le plus portable sera la dernière approche. Mais, comme mentionné par une autre affiche, 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