ServBay

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Crear y ejecutar proyectos React con ServBay ​

¿Qué es React? ​

React es una biblioteca JavaScript de código abierto mantenida por Meta (anteriormente Facebook) y su comunidad, diseñada para construir interfaces de usuario (UI). Utiliza un enfoque basado en componentes para crear interfaces interactivas, permitiendo a los desarrolladores construir aplicaciones web de una sola página (SPA) o vistas de grandes proyectos de manera eficiente y mantenible. Sus principales ventajas son la programación declarativa, un sistema eficiente de actualización del DOM virtual y un ecosistema comunitario robusto.

Principales características y ventajas de React ​

  • Desarrollo basado en componentes: Divide interfaces complejas en componentes independientes y reutilizables, mejorando la mantenibilidad y la reutilización de código.
  • Vistas declarativas: Describe el estado de la UI de manera sencilla; React se encarga de actualizar el DOM para reflejar los cambios, simplificando la lógica de desarrollo.
  • DOM virtual: Mantiene una representación virtual del DOM en memoria y minimiza las operaciones sobre el DOM real comparando las diferencias, mejorando el rendimiento notablemente.
  • Flujo de datos unidireccional: Los datos fluyen de arriba hacia abajo, haciendo que los cambios de estado sean más fáciles de seguir y comprender.
  • JSX: Una extensión de sintaxis JavaScript que permite escribir estructuras similares a HTML en el código, haciendo que sea más legible.
  • Ecosistema potente: Hay una enorme comunidad y muchas librerías de terceros (por ejemplo, React Router, Redux/Zustand/MobX, Material UI) para gestión de estado, enrutamiento, componentes UI y más.

Con React, los desarrolladores pueden construir aplicaciones web modernas y de gran rendimiento de forma más rápida y eficiente.

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

ServBay es un potente entorno local para desarrollo web que proporciona, entre otros paquetes, Node.js para usuarios de macOS y Windows. En esta guía te mostramos 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 reverse proxy en desarrollo y el servicio de archivos estáticos en producción.

Prerrequisitos ​

Antes de comenzar, asegúrate de:

  1. Instalar ServBay: Debes tener ServBay ya instalado y funcionando en tu sistema.
  2. Instalar el paquete Node.js: Instala Node.js desde la interfaz de ServBay o por línea de comandos. Consulta la documentación sobre cómo instalar Node.js en ServBay para más detalles. ServBay gestiona automáticamente las versiones y variables de entorno de Node.js.

Crear el proyecto React ​

Usaremos Vite, una herramienta de construcción frontend moderna, para crear rápidamente tu proyecto React. Vite ofrece arranques ultrarrápidos y Hot Module Replacement (HMR), mejorando la experiencia de desarrollo. Hoy en día, Vite es la opción principal para nuevos proyectos React, reemplazando al tradicional create-react-app.

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

    Abre tu terminal preferida. El directorio raíz recomendado por ServBay es:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Crear un nuevo proyecto React con Vite

    Ejecuta el siguiente comando para inicializar un proyecto llamado servbay-react-demo usando el template react:

    bash
    npx create-vite servbay-react-demo --template react
    • npx es el ejecutor de paquetes de npm, permitiéndote ejecutar herramientas sin instalarlas globalmente. Así te aseguras de usar siempre la versión más reciente de create-vite.
    • create-vite es el generador oficial de proyectos Vite.
    • servbay-react-demo será el nombre del directorio de tu proyecto.
    • --template react indica el uso de la plantilla React para la estructura inicial.

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

  3. Accede al directorio del proyecto e instala dependencias

    Ingresa al nuevo directorio y usa npm para instalar las dependencias requeridas:

    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 verificar que la configuración es correcta, puedes modificar fácilmente la página inicial del proyecto.

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

    Usa el editor de código que prefieras y abre el archivo ubicado en la carpeta del proyecto: src/App.jsx (si elegiste JavaScript) o src/App.tsx (si elegiste TypeScript).

  2. Edita el contenido

    Ubica la sección del código que muestra el contenido principal y cambia el texto para que diga "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.

Ejecutando en modo desarrollo ​

Durante el desarrollo, normalmente ejecutamos un servidor local que ofrece HMR (Hot Module Replacement), facilitando el flujo de trabajo. ServBay puede redirigir peticiones externas hacia este servidor mediante reverse proxy.

  1. Iniciar el servidor de desarrollo en la terminal

    Desde el directorio raíz de tu nuevo proyecto (servbay-react-demo), ejecuta:

    bash
    npm run dev -- --port 8585
    • npm run dev ejecuta el script dev definido en tu archivo package.json, que inicia el servidor Vite.
    • -- --port 8585 especifica el puerto del servidor.

    Al iniciarse, el servidor suele mostrar la dirección local (por ejemplo, http://localhost:8585). Mantén la ventana de la terminal abierta para que el servidor siga funcionando.

  2. Configura el reverse proxy en ServBay

    Abre la interfaz de ServBay y accede a la sección Sitios web (Websites). Haz clic en el botón de agregar para crear una nueva configuración de sitio web:

    • Nombre: ServBay React Dev (elige un nombre descriptivo)
    • Dominio: servbay-react-dev.servbay.demo (dominio de demostración vinculado a ServBay)
    • Tipo de sitio: selecciona Reverse Proxy
    • IP proxy: 127.0.0.1 (tu servidor local)
    • Puerto proxy: 8585 (debe coincidir con el puerto usado para tu servidor de desarrollo)

    Guarda la configuración. ServBay actualizará automáticamente el servidor web interno (Caddy o Nginx) para redireccionar las peticiones a servbay-react-dev.servbay.demo hacia http://127.0.0.1:8585.

    Consulta la documentación sobre gestión de sitios de ServBay para ver instrucciones más detalladas.

  3. Accede al sitio de desarrollo

    Abre tu navegador y entra a: https://servbay-react-dev.servbay.demo.

    • Gracias a las funcionalidades de ServBay, tu sitio de desarrollo local se configura automáticamente con SSL (firmado por ServBay User CA o ServBay Public CA), permitiendo el acceso seguro vía HTTPS. Para más información, revisa cómo proteger tu sitio web con SSL en ServBay.
    • Ahora, cada vez que modifiques y guardes archivos desde tu editor, los cambios se reflejarán automáticamente en el navegador, gracias al sistema Hot Module Replacement (HMR).

Crear versión de producción ​

Cuando tu proyecto React esté listo para desplegar, necesitas generar una versión optimizada para producción.

  1. Construir la versión de producción en la terminal

    Desde la raíz del proyecto (servbay-react-demo), ejecuta:

    bash
    npm run build

    Este comando ejecuta el script build definido en tu package.json. Para proyectos React con Vite, compilará, empaquetará y optimizará tu código, generando archivos estáticos (HTML, CSS, JS y recursos), que generalmente quedan en dist. Al finalizar, recibirás un mensaje de éxito en la terminal.

  2. Configurar la entrega de archivos estáticos en ServBay

    La carpeta dist contiene los archivos listos para desplegar vía servidor web. En ServBay, puedes crear una configuración de sitio web estático apuntando a este directorio.

    Abre ServBay, navega a Sitios web (Websites), y agrega una nueva configuración:

    • Nombre: ServBay React Prod (usa un nombre descriptivo)
    • Dominio: servbay-react.servbay.demo (dominio distinto al de desarrollo)
    • Tipo de sitio: selecciona Static
    • Directorio raíz: apunta a la carpeta dist:
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Guarda la configuración. ServBay servirá directamente los archivos estáticos desde el servidor web integrado.

  3. Accede al sitio en producción

    Abre tu navegador y visita: https://servbay-react.servbay.demo.

    Ahora verás la versión optimizada y lista para producción de tu sitio. Como en desarrollo, este sitio cuenta con soporte SSL automático proporcionado por ServBay.

Conclusión ​

Siguiendo estos pasos, has creado exitosamente un proyecto React en tu entorno local usando ServBay, con configuraciones específicas tanto en modo desarrollo (reverse proxy) como en producción (servicio estático). ServBay simplifica la configuración y gestión de entornos locales, soportando macOS y Windows, con funcionalidades como Node.js integrado, opciones flexibles para sitios (reverse proxy y estático), y SSL automático. Todo esto facilita enormemente el trabajo de desarrolladores React, permitiéndote desarrollar, probar y desplegar tus aplicaciones de forma rápida y segura.