ServBay

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Crear y ejecutar proyectos React en un entorno local de macOS con ServBay ​

¿Qué es React? ​

React es una biblioteca JavaScript de código abierto mantenida por Meta (anteriormente Facebook) y su comunidad, diseñada específicamente para construir interfaces de usuario (UI). Permite desarrollar UI interactivas de forma modular, facilitando la creación eficiente de aplicaciones de página única (SPA) o la capa de vistas de aplicaciones web complejas y de gran escala. Sus principales ventajas radican en el paradigma declarativo, la eficiencia de la actualización mediante Virtual DOM y un ecosistema comunitario sólido.

Características y ventajas principales de React ​

  • Desarrollo basado en componentes: Descompone interfaces complejas en componentes independientes y reutilizables, facilitando el mantenimiento y la reutilización del código.
  • Vistas declarativas: Describe el estado de la UI de forma sencilla y React se encarga de actualizar el DOM para reflejar esos estados, simplificando la lógica del desarrollo de interfaces.
  • Virtual DOM: Mantiene una representación virtual del DOM en memoria y solo actualiza los cambios necesarios en el DOM real, incrementando notablemente el rendimiento.
  • Flujo de datos unidireccional: Los datos fluyen de arriba hacia abajo, haciendo más sencillo rastrear y comprender los cambios de estado en la aplicación.
  • JSX: Una extensión de la sintaxis de JavaScript que permite escribir estructuras similares a HTML directamente en el código, mejorando su legibilidad.
  • Ecosistema robusto: Goza de un gran soporte comunitario y una amplia variedad de librerías de terceros (como React Router, Redux/Zustand/MobX, Material UI, entre otros), cubriendo desde gestión de estado y enrutamiento hasta componentes UI.

Con React, los desarrolladores pueden crear aplicaciones web modernas y de alto rendimiento de manera más rápida y eficiente.

Configuración de entornos de desarrollo y producción React con ServBay ​

ServBay es un entorno de desarrollo web local potente que proporciona múltiples paquetes de software —incluido Node.js— para usuarios de macOS. Esta guía explica paso a paso cómo aprovechar el entorno Node.js de ServBay y la funcionalidad de sitios web para crear, configurar y ejecutar un proyecto React, incluyendo la configuración de un proxy inverso en modo desarrollo y el despliegue de archivos estáticos en producción.

Requisitos previos ​

Asegúrate de haber cumplido con los siguientes pasos antes de comenzar:

  1. Instalar ServBay: ServBay debe estar instalado y ejecutándose exitosamente en tu macOS.
  2. Instalar el paquete Node.js: Instala Node.js a través de la interfaz o línea de comandos de ServBay. Consulta la documentación para instalar el paquete Node.js en ServBay para guía detallada. ServBay gestiona automáticamente la versión de Node.js y las variables de entorno.

Crear un proyecto React ​

Usaremos la moderna herramienta de construcción frontend Vite para crear rápidamente un nuevo proyecto React. Vite ofrece arranque ultrarrápido y recarga en caliente de módulos (HMR), optimizando la experiencia de desarrollo y posicionándose como una de las principales alternativas actuales frente a create-react-app.

  1. Abre la terminal y navega al directorio raíz de tus sitios web

    Abre la aplicación de terminal. El directorio raíz recomendado por ServBay es /Applications/ServBay/www. Cámbiate a ese directorio:

    bash
    cd /Applications/ServBay/www

  2. Crea un nuevo proyecto React con Vite

    Ejecuta el siguiente comando para crear un proyecto nuevo llamado servbay-react-demo usando la plantilla de React con el generador create-vite:

    bash
    npx create-vite servbay-react-demo --template react
    • npx es el ejecutor de paquetes de npm; permite ejecutar herramientas desde el registro de npm sin necesidad de instalación global, asegurando que uses la versión más reciente de create-vite.
    • create-vite es la herramienta oficial de scaffolding de proyectos de Vite.
    • servbay-react-demo será la carpeta de tu proyecto.
    • --template react inicializa la estructura del proyecto usando la plantilla de React.

    Sigue las instrucciones que aparecen en pantalla para completar la creación del proyecto.

  3. Accede al directorio del proyecto e instala las dependencias

    Entra a la nueva carpeta y usa npm para instalar las dependencias necesarias:

    bash
    cd servbay-react-demo
npm install
    • También puedes usar yarn install o pnpm install si prefieres Yarn o pnpm como gestor de paquetes.

Modificar el contenido del proyecto React (opcional) ​

Para comprobar fácilmente que la configuración funciona, vamos a modificar brevemente la página de inicio del proyecto.

  1. Abre el archivo src/App.jsx o src/App.tsx

    Usa tu editor de código favorito para abrir el archivo src/App.jsx (si elegiste la plantilla JavaScript) o src/App.tsx (si elegiste TypeScript) dentro del directorio del proyecto.

  2. Modifica el contenido

    Localiza la sección que renderiza el contenido principal y cambia el texto para mostrar "Hello ServBay!":

    javascript
    // ... otros imports ...
import './App.css';

function App() {
  // ... otro código ...
  return (
    <>
      {/* ... otros elementos ... */}
      <h1>Hello ServBay!</h1>
      {/* ... otros elementos ... */}
    </>
  );
}

export default App;

    Guarda el archivo.

Modo desarrollo ​

Durante el desarrollo, es habitual ejecutar un servidor local con recarga en caliente (HMR), para acelerar la iteración. ServBay puede redirigir peticiones externas a este servidor usando un proxy inverso.

  1. Inicia el servidor de desarrollo desde la terminal

    En la raíz del proyecto servbay-react-demo, ejecuta el siguiente comando para arrancar el servidor de desarrollo de Vite y asignarle un puerto (por ejemplo: 8585):

    bash
    npm run dev -- --port 8585
    • npm run dev ejecuta el script dev definido en el package.json, normalmente encargado de iniciar el servidor de desarrollo de Vite.
    • -- --port 8585 pasa el puerto como parámetro a Vite.

    Tras iniciar, el terminal mostrará la URL local, por ejemplo http://localhost:8585. Deja esta ventana de terminal abierta, no cierres el servidor.

  2. Configura el proxy inverso del sitio web en ServBay

    Abre ServBay y navega a la sección Sitios Web (Websites). Haz clic en el botón de añadir y crea una nueva configuración:

    • Nombre: ServBay React Dev (nombre descriptivo)
    • Dominio: servbay-react-dev.servbay.demo (nombre de dominio demostrativo relacionado con ServBay)
    • Tipo de sitio: selecciona Proxy Inverso (Reverse Proxy)
    • IP del proxy: 127.0.0.1 (el servidor de desarrollo funciona localmente)
    • Puerto de proxy: 8585 (el puerto que asignaste al arrancar el servidor)

    Guarda la configuración. ServBay aplicará los cambios y configurará su servidor web interno (Caddy o Nginx) para redirigir las peticiones al dominio servbay-react-dev.servbay.demo hacia http://127.0.0.1:8585.

    Consulta los detalles sobre cómo agregar sitios web en ServBay en la documentación de gestión de sitios web de ServBay.

  3. Accede al sitio de desarrollo

    Abre tu navegador y visita el dominio que configuraste: https://servbay-react-dev.servbay.demo.

    • Gracias a las prestaciones de ServBay, el sitio local de desarrollo dispondrá automáticamente de un certificado SSL (emitido por ServBay User CA o ServBay Public CA), permitiendo el acceso seguro vía HTTPS. Para más información sobre el soporte SSL de ServBay, revisa Cómo proteger tu sitio con SSL.
    • Ahora, cada vez que guardes modificaciones en tu editor, la página en el navegador se actualizará instantáneamente gracias a la recarga en caliente (HMR).

Construcción para producción ​

Al finalizar el desarrollo y para desplegar tu proyecto React, necesitas generar una versión optimizada para producción.

  1. Construye el proyecto de producción desde la terminal

    Ejecuta el siguiente comando en la raíz del proyecto servbay-react-demo:

    bash
    npm run build

    Este comando ejecuta el script build definido en el package.json. En proyectos React basados en Vite, compilará, empaquetará y optimizará tu código fuente en archivos estáticos (HTML, CSS, JavaScript, recursos, etc.), generando una carpeta dist en la raíz del proyecto. Cuando termine, verás un mensaje de éxito.

  2. Configura el servicio de archivos estáticos en ServBay

    La carpeta dist contiene todos los archivos necesarios para servir tu sitio en producción. Usando ServBay, puedes configurar un sitio estático que apunte a este directorio.

    Entra de nuevo a ServBay, navega hasta Sitios Web (Websites) y crea una nueva configuración:

    • Nombre: ServBay React Prod (nombre descriptivo)
    • Dominio: servbay-react.servbay.demo (dominio demostrativo, diferente del de desarrollo)
    • Tipo de sitio: selecciona Estático (Static)
    • Directorio raíz del sitio: /Applications/ServBay/www/servbay-react-demo/dist (la carpeta generada con la build de producción)

    Guarda los cambios. ServBay configurará el servidor web para proveer directamente los archivos estáticos del directorio dist.

  3. Accede al sitio de producción

    Abre tu navegador y visita el dominio configurado para producción: https://servbay-react.servbay.demo.

    Ahora estarás viendo el sitio web optimizado y listo para producción, también con soporte SSL automático provisto por ServBay.

Resumen ​

Siguiendo estos pasos, habrás creado y desplegado exitosamente un proyecto React en tu entorno local de macOS usando ServBay, configurando tanto el proxy inverso para desarrollo como el servicio de archivos estáticos para producción. ServBay simplifica la creación y administración del entorno local, destacando su integración con Node.js, flexibilidad en la gestión de sitios web (proxy inverso y contenido estático) y soporte automático de SSL, facilitando enormemente el flujo de trabajo para desarrolladores React. A partir de aquí, puedes continuar desarrollando, probando y desplegando tus aplicaciones React con total confianza.