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

Question

Mon projet est basé sur create-react-app . npm start ou yarn start par défaut, l'application sera exécutée sur port 3000 et il n'y a pas d'option pour 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 exemplaires de ce projet simultanément (pour les tests), l'un dans le port 3005 et l'autre est 3006

Answer 1

Si vous ne voulez pas définir l'option variable d'environnement une autre option consiste à modifier l scripts partie de package.json 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"

Windows La solution @JacobEnsor

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

librairie multi-env fonctionne partout. Voir Aguinaldo Possatto réponse pour plus de détails

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 (utile pour stocker des ensembles de variables pour des deploy sous une forme pratique et lisible). N'oubliez pas d'ajouter *.env en .gitignore si vous stockez toujours vos secrets dans .env des fichiers. Ici est l'explication de la raison pour laquelle l'utilisation des variables d'environnement est meilleure dans la plupart des cas. Ici est l'explication de pourquoi stocker des secrets dans l'environnement est une mauvaise idée.

Answer 2

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

Créer un .env à la racine de votre projet et spécifiez le numéro de port à cet endroit. Par exemple :

PORT=3005

Answer 3

Vous pourriez 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",

Answer 4

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

Answer 5

Juste une petite mise à jour dans webpack.config.js :

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

puis exécutez npm start encore.