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 Angular en ServBay ​

Introducción ​

Este documento está diseñado para guiarte en la creación, configuración y ejecución de un proyecto Angular en el entorno local de desarrollo web ServBay. Utilizaremos el potente entorno Node.js que ofrece ServBay y la flexible gestión de sitios web (anteriormente llamados “hosts”) para configurar fácilmente el entorno de desarrollo y producción, asegurando acceso seguro mediante dominios personalizados y certificados SSL. ServBay integra múltiples servicios esenciales para el desarrollo, como Node.js, PHP, Python, Go, Java, bases de datos y más, lo que lo convierte en una solución ideal para desarrollos full-stack locales.

¿Qué es Angular? ​

Angular es un framework frontend de código abierto, mantenido por Google, para crear aplicaciones SPA (Single Page Applications) dinámicas y de alto rendimiento. Basado en TypeScript, proporciona un conjunto completo de herramientas y una estructura de desarrollo sólida, siendo especialmente adecuado para aplicaciones empresariales grandes y complejas.

Características y ventajas clave de Angular ​

  • Arquitectura basada en componentes: Permite construir interfaces de usuario mediante componentes reutilizables, mejorando la mantenibilidad y escalabilidad del código.
  • Soporte de TypeScript: Ofrece comprobación de tipos estáticos y potentes características orientadas a objetos, aumentando la calidad del código y la eficiencia en el desarrollo.
  • Inyección de dependencias: Facilita la prueba y administración de dependencias en los componentes.
  • CLI robusto (Interfaz de Línea de Comandos): Simplifica tareas como la creación de proyectos, generación de componentes, servicios, módulos, así como procesos de construcción y pruebas.
  • Módulos integrados: Incluye soluciones para enrutamiento, manejo de formularios, cliente HTTP y otras funcionalidades comunes.
  • Optimización de rendimiento: Soporta compilación anticipada (AOT), tree-shaking, y otras técnicas para optimizar el rendimiento de las aplicaciones.

El uso de Angular junto con el entorno estable que brinda ServBay permite a los desarrolladores centrarse más en la lógica de negocio.

Requisitos previos ​

Antes de empezar, asegúrate de tener las siguientes condiciones:

  1. ServBay instalado: Debes haber instalado y ejecutado ServBay correctamente (compatible con macOS y Windows).
  2. Node.js habilitado: Desde el panel de control de ServBay, asegúrate de instalar y habilitar la versión de Node.js que necesitas. ServBay permite instalar varias versiones de Node.js y cambiar entre ellas fácilmente.

Configuración y ejecución de un proyecto Angular con ServBay ​

Vamos a crear y ejecutar un proyecto Angular utilizando el entorno Node.js de ServBay. En modo desarrollo, configuraremos el proxy inverso de ServBay para redirigir a tu servidor de desarrollo Angular; en producción, compilaremos el proyecto y configuraremos el servicio de archivos estáticos.

1. Crear un proyecto Angular ​

Primero, usaremos Angular CLI para crear un nuevo proyecto.

  1. Instala Angular CLI: Abre la terminal y utiliza el entorno Node.js proporcionado por ServBay para instalar Angular CLI de manera global. Si el entorno de Node.js de ServBay no se ha añadido automáticamente a tu PATH del sistema, puede que debas cambiar primero al entorno de Node.js de ServBay. Normalmente, ServBay gestiona esto por ti.

    bash
    npm install -g @angular/cli

    Esto instalará el comando ng en tu sistema para que puedas utilizar Angular CLI globalmente.

  2. Crea un nuevo proyecto Angular: Navega al directorio raíz sugerido por ServBay para sitios web y utiliza el comando ng new para iniciar un proyecto Angular. Se recomienda elegir un nombre que incluya la marca ServBay, como servbay-angular-app.

    macOS:

    bash
    cd /Applications/ServBay/www
ng new servbay-angular-app

    Windows:

    bash
    cd C:\ServBay\www
ng new servbay-angular-app

    Angular CLI te hará algunas preguntas sobre la configuración del proyecto. Responde según tus preferencias:

    ? Would you like to add Angular routing? Yes  # ¿Deseas añadir enrutamiento? Se recomienda seleccionar Yes
? Which stylesheet format would you like to use? CSS # Elige el formato de hoja de estilos, por ejemplo CSS

    Espera a que finalice el comando. Angular CLI creará una nueva carpeta llamada servbay-angular-app con la estructura y archivos básicos dentro del directorio raíz de tu sitio:

    • macOS: /Applications/ServBay/www/servbay-angular-app
    • Windows: C:\ServBay\www\servbay-angular-app

  3. Instala las dependencias del proyecto: Entra en el directorio del nuevo proyecto y instala las dependencias necesarias.

    bash
    cd servbay-angular-app
npm install

    El comando npm install leerá las dependencias definidas en el archivo package.json del proyecto y las instalará en la carpeta node_modules.

2. Modificar el contenido principal del proyecto Angular (opcional) ​

Para verificar que el proyecto se está ejecutando correctamente, puedes modificar la página principal.

  1. Edita el archivo src/app/app.component.html: Usa tu editor de código favorito para abrir servbay-angular-app/src/app/app.component.html. Elimina o modifica su contenido para mostrar, por ejemplo, sólo un título simple como "Hello ServBay!".

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>¡Esta es tu app Angular corriendo en ServBay!</p>
</div>

3. Ejecutar el proyecto en modo desarrollo ​

En desarrollo, normalmente utilizamos el servidor de Angular CLI (ng serve), el cual ofrece recarga en caliente y otras facilidades. Aprovecharemos el proxy inverso de ServBay para acceder al servidor de desarrollo mediante un dominio local.

  1. Inicia el servidor de desarrollo Angular: En el directorio raíz del proyecto, ejecuta el siguiente comando para iniciar el servidor: escoge un puerto, por ejemplo 8585, para evitar conflictos con los puertos predeterminados de ServBay.

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng serve --port 8585

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng serve --port 8585

    Este comando compila tu proyecto Angular y levanta un servidor web en http://localhost:8585/. Mantén la terminal abierta mientras el servidor esté activo.

  2. Configura el sitio web en ServBay (proxy inverso): Abre el panel de control de ServBay y accede a la sección de configuración de “Sitios web” (anteriormente “hosts”). Añade una nueva configuración empleando proxy inverso y asigna un dominio local al servidor de desarrollo Angular.

    • Nombre: Por ejemplo, My Angular Dev Site (sólo para visualización interna en ServBay)
    • Dominio: Se recomienda usar un dominio de prueba con la marca ServBay, como servbay-angular-dev.servbay.demo. ServBay asigna automáticamente este dominio a la IP local 127.0.0.1.
    • Tipo de sitio web: Elige Proxy Inverso (Reverse Proxy).
    • Dirección del proxy: Escribe 127.0.0.1.
    • Puerto del proxy: Escribe el puerto que configuraste en ng serve, por ejemplo 8585.

    Guarda y aplica los cambios en ServBay.

  3. Accede al sitio web en modo desarrollo: Abre tu navegador y visita el dominio local configurado: https://servbay-angular-dev.servbay.demo.

    ServBay soporta por defecto la generación y configuración de certificados SSL (ya sea con ServBay User CA o ServBay Public CA), permitiéndote navegar seguro por HTTPS en tu sitio local. Esto simula un entorno de producción y ayuda a detectar problemas relacionados con HTTPS desde el desarrollo.

4. Compilar y ejecutar la versión de producción ​

Cuando el desarrollo del proyecto esté listo para desplegarse, necesitas compilar una versión optimizada para producción. Esto genera archivos estáticos aptos para alojarse en cualquier servidor. Utilizaremos la opción de sitio estático de ServBay.

  1. Compilar la versión de producción: En el directorio raíz del proyecto, ejecuta el siguiente comando para compilar la versión de producción:

    macOS:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# O, en versiones más recientes de Angular CLI:
# ng build

    Windows:

    bash
    cd C:\ServBay\www\servbay-angular-app
ng build --prod
# O, en versiones más recientes de Angular CLI:
# ng build

    El atributo --prod (ahora uso predeterminado en Angular CLI moderno) activa optimizaciones de producción como AOT, minificación y tree-shaking. Al finalizar, los archivos estáticos se encontrarán en la carpeta dist/servbay-angular-app (el nombre podría variar según la configuración, pero normalmente es el mismo que el del proyecto).

  2. Configura un sitio web en ServBay (servicio de archivos estáticos): Desde el panel de control de ServBay, crea un nuevo sitio y asigna un dominio local apuntando al directorio de la versión compilada.

    • Nombre: Por ejemplo, My Angular Production Site

    • Dominio: Usa otro dominio de prueba con la marca ServBay, como servbay-angular-prod.servbay.demo.

    • Tipo de sitio web: Selecciona Estático (Static).

    • Directorio raíz: Navega hasta la carpeta de salida de la compilación. Por ejemplo:

      • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
      • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

      Asegúrate de elegir el directorio que contiene el archivo index.html.

    Guarda y aplica los cambios en ServBay.

  3. Accede al sitio web en modo producción: Abre tu navegador y visita el dominio local configurado: https://servbay-angular-prod.servbay.demo.

    Ahora verás la versión de producción del proyecto Angular, servida mediante el servidor web de alto rendimiento de ServBay (Caddy, Nginx, o el servidor configurado según preferencia). ServBay gestiona automáticamente los certificados SSL para asegurar el acceso.

Ventajas de ServBay en el desarrollo con Angular ​

  • Entorno integrado: Instala y administra versiones de Node.js fácilmente, sin tener que configurar manualmente variables de entorno.
  • Administración flexible de sitios web: Cambia rápidamente entre acceso de desarrollo (proxy inverso) y producción (archivos estáticos) mediante una interfaz intuitiva.
  • Soporte SSL integrado: Obtén certificados SSL locales, automáticos y gratuitos en tu entorno de desarrollo, simulando producción y evitando advertencias de contenido mixto.
  • Compatibilidad con múltiples stacks: Integra backend APIs (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, etc.) y bases de datos (MySQL, PostgreSQL, MongoDB, Redis) de manera sencilla, creando un entorno full-stack local completo. ServBay mantiene y actualiza estos paquetes constantemente, incluyendo funciones que antes no estaban disponibles.
  • Copias de seguridad y restauración de datos: Realiza fácilmente copias de seguridad y restauraciones de la configuración, sitios web, bases de datos y certificados SSL, asegurando la seguridad de tus datos locales.
  • Restablecimiento de contraseñas de bases de datos: Incluye herramientas para restablecer la contraseña del usuario root en MySQL, MariaDB y PostgreSQL, solucionando un problema común para muchos desarrolladores.

Preguntas frecuentes (FAQ) ​

  • P: ¿Qué hago si al ejecutar ng new o ng serve aparece command not found: ng? R: Esto indica que Angular CLI no está instalado correctamente o no está en tu PATH. Verifica que hayas instalado @angular/cli globalmente (npm install -g @angular/cli) y que el entorno Node.js de ServBay esté correctamente configurado en el PATH. Intenta reiniciar la terminal o ServBay.
  • P: ng serve falla y dice que el puerto está en uso, ¿cómo soluciono esto? R: El puerto (por ejemplo 8585) está ocupado por otro programa. Usa el parámetro --port en el comando, eligiendo un puerto libre, por ejemplo ng serve --port 8586, y actualiza el número de puerto en la configuración de proxy inverso en ServBay.
  • P: Configuré el sitio en ServBay, pero al acceder al dominio la página no carga, ¿qué puedo hacer? R: Revisa lo siguiente:
    • Asegúrate de que ServBay esté en ejecución.
    • Para el modo desarrollo, comprueba que ng serve esté activo y escuchando en el puerto configurado para el proxy inverso.
    • En producción, valida que el “directorio raíz” apunte al sitio correcto, normalmente el que contiene el archivo index.html (dist/nombre-del-proyecto).
    • Consulta los logs de ServBay para buscar más detalles sobre posibles errores.
    • Verifica que el dominio al que accedes coincida exactamente con el configurado en ServBay.
  • P: ¿Puedo usar distintos servidores web de ServBay (Caddy/Nginx/Apache) para alojar la versión de producción de Angular? R: Sí, ServBay soporta Caddy y Nginx (además de Apache) como servidores de archivos estáticos. Al configurar el sitio estático, ServBay empleará el servidor web habilitado para servir tus archivos de manera eficiente.

Resumen ​

Siguiendo esta guía, ya deberías poder crear y ejecutar proyectos Angular en el entorno ServBay fácilmente. Aprendiste cómo aprovechar el proxy inverso para acceder al servidor de desarrollo Angular por dominio local en modo dev, y cómo compilar y publicar la versión de producción usando el servicio de archivos estáticos de ServBay. El potente entorno Node.js, la gestión de sitios, y el soporte automatizado de SSL que ofrece ServBay elevan enormemente la eficiencia y experiencia en el desarrollo local de aplicaciones Angular. Además, el soporte extensivo para diferentes stacks y servicios en ServBay crea una base sólida para el desarrollo full-stack integral.