Especifique el puerto para ejecutar Create-React-App en Localhost

1. Configurar el proyecto create-react-app
2. Especifique el puerto para ejecutar create-react-app en Localhost
3. Cambiar puerto en el proyecto create-react-app
4. Cambiar puerto en el proyecto create-react-app usando el paquete cross-env

Facebook es una organización que desarrolló y mantuvo React. El mismo equipo lanzó el paquete create-react-app, que ofrece un entorno excelente para desarrollar aplicaciones React.

Le permite concentrarse en escribir código JSX y JavaScript sin las molestias de configurar paquetes web, transpiladores y otras herramientas modernas. Puede crear una aplicación React de una sola página con solo unos pocos comandos a través de npm.

Configurar el proyecto create-react-app

Los desarrolladores deben ingresar un comando usando herramientas como npm o yarn. La aplicación creada con create-react-app estará disponible en localhost, donde puedes obtener una vista previa de tu aplicación yendo a localhost:3000.

Especifique el puerto para ejecutar create-react-app en Localhost

En lugar de vivir en un servidor remoto, las aplicaciones alojadas localmente viven en su computadora y no se puede acceder a ellas desde dispositivos que no estén conectados a su red.

A veces es necesario ejecutar dos aplicaciones en localhost, por lo que debe haber una forma de que el navegador muestre diferentes aplicaciones en diferentes direcciones de localhost.

Por lo general, usamos puertos en redes locales para diferenciar entre dos instancias de aplicaciones diferentes en su host local. La aplicación A podría estar alojada en localhost:3000, mientras que la aplicación B podría estar en localhost:3006.

Una vez que haya creado un proyecto create-react-app y desee iniciarlo, se alojará en la dirección localhost:3000 de forma predeterminada; el 3000 es el puerto aquí. Al iniciar una aplicación create-react-app, npm no te pide que especifiques el puerto para ejecutar la aplicación.

Si ya tiene una aplicación React ejecutándose en su dispositivo e intenta iniciar otra, no usará automáticamente un puerto diferente para alojarla. En su lugar, le dará un error que le indica que la aplicación ya se está ejecutando en ese puerto.

Por lo tanto, es posible que necesite una forma de especificar que un proyecto específico de crear-reaccionar-aplicación debe ejecutarse en un puerto diferente. De esta manera, puede tener dos proyectos create-react-app ejecutándose simultáneamente.

Cambiar puerto en el proyecto create-react-app

Para cambiar el puerto de la aplicación, debe ir al directorio del proyecto y ubicar un archivo package.json. Se encuentra en el directorio principal del proyecto, por lo que no es difícil de encontrar.

Una vez que abra el archivo, busque la sección "scripts", que controla los comandos utilizados para iniciar una aplicación, como npm start.

Cambiar puerto en Windows

A menos que realice algún cambio, esta sección se verá así:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Sin embargo, puede especificar el puerto cuando sea necesario. Para ello, debe cambiar el valor de la propiedad "start".

Por ejemplo, si desea que la aplicación se ejecute en el puerto 8000, puede realizar los siguientes cambios:

"scripts": {
    "start": "set PORT=8000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Como puede ver, agregamos el set PORT=8000 al principio y usamos el operador && para conectarlo con el valor anterior.

Eso es todo lo que se necesita para cambiar el puerto predeterminado de un proyecto create-react-app en Windows. Si ejecuta la aplicación ahora, se abrirá en la dirección localhost:8000 en el navegador.

Cambiar puerto en Linux/Mac

En Linux y Mac, puede cambiar el puerto localhost predeterminado modificando la sección "scripts" del archivo package.json de esta manera:

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

Si eso no funciona en su versión de Linux o Mac, puede probar esto:

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

Cambiar puerto en el proyecto create-react-app usando el paquete cross-env

Una comunidad de JavaScript ha desarrollado una forma de establecer variables de entorno, como PORT en un solo lugar, y se ejecutará de manera similar en todas las plataformas.

Debe instalar el paquete usando npm como una dependencia de desarrollo. Asegúrate de escribir bien:

npm install --save-dev cross-env

Luego, cambia la propiedad "start" en la sección "scripts" al siguiente valor:

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

Actualmente, el paquete está en modo de mantenimiento, lo que significa que no se agregan nuevas funciones, pero aún funciona.