¿Cómo especificar un puerto para ejecutar un proyecto basado en crear-reaccionar-aplicación?

Mi proyecto se basa en create-react-app . npm starto, yarn startde manera predeterminada, ejecutará la aplicación en el puerto 3000 y no hay opción de especificar un puerto en el paquete.json.

¿Cómo puedo especificar un puerto de mi elección en este caso? Quiero ejecutar dos de este proyecto simultáneamente (para pruebas), uno en puerto 3005y otro es3006

Si no desea establecer la variable de entorno , otra opción es modificar la scriptsparte de package.json de:

"start": "react-scripts start"

a

Linux (probado en Ubuntu 14.04 / 16.04) y MacOS (probado por @ aswin-s en MacOS Sierra 10.12.4):

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

o (puede ser) una solución más general por @IsaacPak

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

Solución Windows @JacobEnsor

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

cross-env lib funciona en todas partes. Ver la respuesta de Aguinaldo Possatto para más detalles.

Actualización debido a la popularidad de mi respuesta: actualmente prefiero usar variables de entorno guardadas en un .envarchivo (útil para almacenar conjuntos de variables para diferentes deployconfiguraciones en una forma conveniente y legible). No se olvide de añadir *.enven .gitignoresi todavía está guardando sus secretos en .envlos archivos. Aquí está la explicación de por qué el uso de variables de entorno es mejor en la mayoría de los casos. Aquí está la explicación de por qué almacenar secretos en el medio ambiente es una mala idea.

Aquí hay otra forma de lograr esta tarea.

Cree un .envarchivo en la raíz de su proyecto y especifique el número de puerto allí. Me gusta:

PORT=3005

Puede usar cross-env para configurar el puerto, y funcionará en Windows, Linux y Mac.

yarn add -D cross-env

entonces en package.json el enlace de inicio podría ser así:

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

Puede especificar una variable de entorno denominada PORTpara especificar el puerto en el que se ejecutará el servidor.

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

Para mis amigos de Windows, descubrí una forma de cambiar el puerto ReactJS para que se ejecute en cualquier puerto que desee. Antes de ejecutar el servidor, vaya a

 node_modules/react-scripts/scripts/start.js

En él, busque la línea a continuación y cambie el número de puerto al puerto deseado

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

Y eres bueno para ir.

Cree un archivo con nombre .enven el directorio principal además package.jsony establezca la PORTvariable en el número de puerto deseado.

Por ejemplo:

.env

PORT=4200

Solo actualiza un poco en webpack.config.js:

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

luego corre de npm startnuevo.

En su package.json, vaya a los scripts y use --port 4000o set PORT=4000, como en el ejemplo a continuación:

package.json (Windows):

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

package.json (Ubuntu):

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

Esto funciona tanto en Windows como en Linux

package.json

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

pero es preferible crear .env con PORT = 3006 escrito dentro

El cambio en mi archivo package.json también "start": "export PORT=3001 && react-scripts start"funcionó para mí y estoy en macOS 10.13.4

Para resumir, tenemos tres enfoques para lograr esto:

1. Establecer una variable de entorno llamada "PUERTO"
2. Modifique la tecla "inicio" en la parte "scripts" de package.json
3. Cree un archivo .env y coloque la configuración PORT en él

El más portátil será el último enfoque. Pero como se menciona en otro póster, agregue .env a .gitignore para no cargar la configuración en el repositorio de fuentes públicas.

Más detalles: este artículo

puedes encontrar la configuración de puerto predeterminada al iniciar tu aplicación

yourapp / scripts / start.js

desplácese hacia abajo y cambie el puerto a lo que quiera

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

Espero que esto pueda ayudarte;)

Prueba esto:

npm start port=30022

Sería bueno poder especificar un puerto que no 3000sea, ya sea como parámetro de línea de comando o como variable de entorno.

En este momento, el proceso es bastante complicado:

1. correr npm run eject
2. Espera a que eso termine
3. Edite scripts/start.jsy busque / reemplace 3000con cualquier puerto que desee usar
4. Edita config/webpack.config.dev.jsy haz lo mismo
5. npm start

En Windows se puede hacer de 2 maneras.

1. En "\ node_modules \ react-scripts \ scripts \ start.js", busque "DEFAULT_PORT" y agregue el número de puerto deseado.

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

2. En package.json, anexe la siguiente línea. "start": "set PORT = 9999 && react-scripts start" Luego inicie la aplicación usando NPM start. Iniciará la aplicación en el puerto 9999.

¿Qué tal dar el número de puerto mientras se invoca el comando sin necesidad de cambiar nada en el código de su aplicación o en los archivos de entorno? De esa manera, es posible ejecutar y servir la misma base de código desde varios puertos diferentes.

me gusta:

$ export PORT=4000 && npm start

Puede colocar el número de puerto que desee en lugar del valor de ejemplo 4000anterior.

En caso de que ya lo haya hecho npm run eject, vaya a scripts / start.js y cambie el puerto const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(3000 en este caso) al puerto que desee.

Cambiar el puerto predeterminado en React-App

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

Ve a esta línea:

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

Cambie el número de puerto con su número de puerto

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

Por ejemplo:

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

Guardar y Salir