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

Mon projet est basé sur create-react-app . npm startou yarn startpar défaut exécutera l'application sur le port 3000 et il n'y a pas d'option 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 ce projet simultanément (pour les tests), un dans le port 3005et l'autre est3006

Si vous ne souhaitez pas définir la variable d'environnement , une autre option consiste à modifier la scriptspartie 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"

cross-env lib fonctionne partout. Voir la réponse d' Aguinaldo Possatto pour plus de détails

Mise à jour en raison de la popularité de ma réponse: Actuellement, je préfère utiliser des variables d'environnement enregistrées dans un .envfichier (utile pour stocker des ensembles de variables pour différentes deployconfigurations sous une forme pratique et lisible). Ne pas oublier d'ajouter *.envdans .gitignoresi vous stockez encore vos secrets dans les .envfichiers. Voici l'explication des raisons pour lesquelles l'utilisation de variables d'environnement est préférable dans la plupart des cas. Voici l'explication de pourquoi 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 .envfichier à la racine de votre projet et indiquez-y le numéro de port. Comme:

PORT=3005

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

yarn add -D cross-env

puis dans package.json, le lien de démarrage pourrait ressembler à ceci:

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

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

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

Pour mes amis Windows, j'ai découvert un moyen de changer le port ReactJS pour qu'il s'exécute sur n'importe quel port que vous souhaitez.

 node_modules/react-scripts/scripts/start.js

Dans celui-ci, recherchez la ligne ci-dessous et changez le numéro de port pour votre port souhaité

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

Et vous êtes prêt à partir.

Créez un fichier avec un nom .envdans le répertoire principal package.jsonet définissez la PORTvariable sur le numéro de port souhaité.

Par exemple:

.env

PORT=4200

Mettez à jour un peu dans webpack.config.js:

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

puis exécutez à npm startnouveau.

Dans votre package.json, accédez aux scripts et utilisez --port 4000ou set PORT=4000, comme dans l'exemple ci-dessous:

package.json (Les fenêtres):

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (Ubuntu):

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

Cela fonctionne sur Windows et Linux

package.json

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

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

La modification de mon fichier package.json a également "start": "export PORT=3001 && react-scripts start"fonctionné pour moi et je suis sur macOS 10.13.4

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

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

La 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

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

yourapp / scripts / start.js

faites défiler vers le bas et modifiez le port comme vous le souhaitez

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

j'espère que cela peut vous aider;)

Essaye ça:

npm start port=30022

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.

À l'heure actuelle, le processus est assez complexe:

1. Courir npm run eject
2. Attendez que cela se termine
3. Modifiez scripts/start.jset trouvez / remplacez 3000par le port que vous souhaitez utiliser
4. Modifier config/webpack.config.dev.jset faire de même
5. npm start

Sous Windows, cela peut se faire de 2 manières.

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

   Par exemple: 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" Ensuite, démarrez l'application en utilisant NPM start. Il démarrera l'application dans le port 9999.

Que diriez-vous de donner le numéro de port tout en invoquant la commande sans avoir besoin de changer quoi que ce soit dans 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 que vous aimez à la place de l'exemple de valeur 4000ci-dessus.

Dans le cas où vous l'avez déjà fait npm run eject, allez dans scripts / start.js et changez le port en const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 dans ce cas) sur le port que vous voulez.

Changer le port par défaut sur React-App

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

Allez sur cette ligne:

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

Changez le numéro de port avec votre numéro de port

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

Par exemple:

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

Sauvegarder et quitter