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é:
npm run eject
scripts/start.js
et trouvez / remplacez 3000
avec le port que vous voulez utiliser config/webpack.config.dev.js
et faites la même chose 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:
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