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

Descripción general ​

Este documento te guiará para crear, configurar y ejecutar un proyecto Angular en el entorno local de desarrollo web proporcionado por ServBay. Aprovecharemos el potente entorno Node.js de ServBay y su flexible sistema de gestión de sitios web (anteriormente llamado “hosts”) para facilitar la configuración de entornos de desarrollo y producción, además de garantizar el acceso seguro utilizando dominios personalizados y certificados SSL. ServBay integra múltiples paquetes de software esenciales para el desarrollo (antes denominados “servicios”), como Node.js, PHP, Python, Go, Java, bases de datos y más, posicionándose como la opción ideal para desarrollo local full stack.

¿Qué es Angular? ​

Angular es un framework frontend de código abierto mantenido por Google para construir aplicaciones de una sola página (SPA) altamente dinámicas y de alto rendimiento. Está desarrollado sobre TypeScript, ofreciendo un conjunto integral de herramientas y un enfoque de desarrollo estructurado, ideal para aplicaciones empresariales grandes y complejas.

Principales características y ventajas de Angular ​

  • Arquitectura basada en componentes: Construye la interfaz de usuario mediante componentes reutilizables, mejorando la mantenibilidad y escalabilidad del código.
  • Soporte para TypeScript: Ofrece comprobación de tipos estáticos y robustas características orientadas a objetos, incrementando la calidad y eficiencia en el desarrollo.
  • Inyección de dependencias: Facilita el testeo y la gestión de dependencias dentro de los componentes.
  • CLI potente (Interfaz de Línea de Comandos): Simplifica la creación de proyectos, generación de componentes, servicios, módulos, así como tareas de construcción y pruebas.
  • Soluciones integradas: Provee módulos internos para funciones comunes como enrutamiento, gestión de formularios y cliente HTTP.
  • Optimización del rendimiento: Soporta compilación anticipada (AOT), tree-shaking y otras técnicas para mejorar el rendimiento de las aplicaciones.

Al combinar Angular con el entorno estable de ServBay, los desarrolladores pueden concentrarse en implementar la lógica del negocio sin preocuparse por el entorno base.

Requisitos previos ​

Antes de comenzar, asegúrate de haber completado lo siguiente:

  1. Instalar ServBay: Ya tienes ServBay instalado y ejecutándose en tu macOS.
  2. Activar el paquete de Node.js: En el panel de control de ServBay, asegúrate de tener instalada y activada la versión de Node.js que necesitas. ServBay permite instalar varias versiones de Node.js y alternar fácilmente entre ellas.

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

Vamos a utilizar el entorno Node.js de ServBay para crear y ejecutar un proyecto Angular. En modo desarrollo, configuraremos un proxy inverso desde ServBay hacia el servidor de desarrollo de Angular; en producción, construiremos el proyecto y configuraremos el servicio de archivos estáticos con ServBay.

1. Crear un proyecto Angular ​

Primero, necesitamos crear un nuevo proyecto usando Angular CLI.

  1. Instalar Angular CLI: Abre tu Terminal y utiliza el entorno Node.js de ServBay para instalar Angular CLI globalmente. Si el entorno Node.js de ServBay no se añade automáticamente a tu PATH, tal vez debas activarlo manualmente, pero normalmente ServBay gestiona esto por sí mismo.

    bash
    npm install -g @angular/cli

    Este comando instalará ng en tu sistema para que puedas usar Angular CLI globalmente.

  2. Crear un nuevo proyecto Angular: Navega al directorio raíz recomendado por ServBay para sitios web, /Applications/ServBay/www, y utiliza el comando ng new para crear un nuevo proyecto Angular. Se recomienda asignar un nombre identificativo ligado a ServBay, como servbay-angular-app.

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

    Angular CLI te preguntará sobre algunas configuraciones del proyecto. Responde según tus preferencias:

    ? Would you like to add Angular routing? Yes  # Si deseas incluir enrutamiento, se recomienda "Yes"
? Which stylesheet format would you like to use? CSS # Elige el formato de estilos, por ejemplo CSS

    Una vez completado, Angular CLI creará una carpeta llamada servbay-angular-app en /Applications/ServBay/www, conteniendo la estructura y los archivos base del proyecto.

  3. Instalar dependencias del proyecto: Accede al directorio del proyecto recién creado e instala todas las dependencias locales necesarias.

    bash
    cd servbay-angular-app
npm install

    El comando npm install lee las dependencias listadas en el archivo package.json e instala todo en la carpeta node_modules.

2. Modificar el contenido de salida de Angular (opcional) ​

Para verificar que el proyecto funciona correctamente, puedes modificar la página principal del proyecto.

  1. Edita el archivo src/app/app.component.html: Abre el archivo servbay-angular-app/src/app/app.component.html en tu editor de código favorito. Elimina o modifica el contenido para dejar solo un título sencillo como "Hello ServBay!".

    html
    <div style="text-align:center">
  <h1>Hello ServBay!</h1>
  <p>This is your Angular app running via ServBay!</p>
</div>

3. Ejecutar el proyecto en modo desarrollo ​

Durante el desarrollo, normalmente utilizamos el servidor de desarrollo de Angular CLI (ng serve), que ofrece recarga en caliente y otras funcionalidades útiles. Utilizaremos el proxy inverso de ServBay para acceder a este servidor mediante un dominio local.

  1. Iniciar el servidor de desarrollo de Angular: Desde el directorio raíz del proyecto (/Applications/ServBay/www/servbay-angular-app), ejecuta el siguiente comando para lanzar el servidor en un puerto, por ejemplo 8585, evitando conflictos con el puerto web predeterminado de ServBay.

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

    Este comando compilará tu proyecto Angular y levantará un servidor web local en http://localhost:8585/. Mantén la terminal abierta para que el servidor siga funcionando.

  2. Configurar un sitio en ServBay (proxy inverso): Abre el panel de control de ServBay y entra en la sección de configuración de “Sitios web” (anteriormente “hosts”). Agrega un nuevo sitio con un proxy inverso apuntando al servidor de desarrollo de Angular.

    • Nombre: Por ejemplo, My Angular Dev Site (solo visible dentro de ServBay)
    • Dominio: Se recomienda uno de pruebas con la marca ServBay, como servbay-angular-dev.servbay.demo. ServBay resolverá automáticamente .servbay.demo a 127.0.0.1.
    • Tipo de sitio: Selecciona Proxy inverso (Reverse Proxy).
    • Dirección de proxy: Introduce 127.0.0.1.
    • Puerto de proxy: Escribe el puerto que usaste con ng serve, por ejemplo 8585.

    Guarda y aplica los cambios en ServBay tras finalizar la configuración.

  3. Acceder al sitio en modo desarrollo: Abre tu navegador y visita el dominio local que configuraste, por ejemplo https://servbay-angular-dev.servbay.demo.

    Como estás accediendo a través de ServBay, y ServBay soporta automáticamente la generación y configuración de certificados SSL locales (ya sea con ServBay User CA o ServBay Public CA), puedes acceder directamente vía HTTPS de manera segura a tu sitio de desarrollo. Esto simula el acceso HTTPS en producción y te ayuda a detectar posibles problemas antes del despliegue.

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

Cuando tu proyecto Angular esté listo para producción, deberás construir una versión optimizada que genere archivos estáticos aptos para cualquier servidor de archivos. Utilizaremos la función de sitios estáticos de ServBay para alojar estos archivos.

  1. Construir la versión de producción: En el directorio raíz del proyecto (/Applications/ServBay/www/servbay-angular-app), ejecuta el siguiente comando para generar la build optimizada:

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

    El flag --prod (por defecto en versiones recientes) habilita optimizaciones como compilación anticipada (AOT), minificación y tree-shaking. Los archivos generados aparecerán en dist/servbay-angular-app (el nombre puede variar según la configuración o el nombre de tu proyecto).

  2. Configurar un sitio ServBay (servicio de archivos estáticos): Desde el panel de control de ServBay, agrega un nuevo sitio que apunte al directorio de archivos estáticos generado:

    • Nombre: Por ejemplo, My Angular Production Site
    • Dominio: Puedes usar otro dominio de prueba, como servbay-angular-prod.servbay.demo.
    • Tipo de sitio: Selecciona Estático (Static).
    • Directorio raíz del sitio: Navega hasta el directorio de salida, normalmente /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Asegúrate de que señalas directamente al directorio que contiene index.html.

    Guarda y aplica los cambios en ServBay tras la configuración.

  3. Acceder al sitio en modo producción: Abre tu navegador y accede al dominio configurado, por ejemplo https://servbay-angular-prod.servbay.demo.

    Ahora accederás a la versión de producción de tu proyecto Angular, servida como archivos estáticos a través del servidor web de alto rendimiento de ServBay (como Caddy o Nginx, según tu configuración). ServBay gestiona automáticamente los certificados SSL para garantizar acceso seguro.

Ventajas de usar ServBay en el desarrollo Angular ​

  • Entorno integrado: Instala y gestiona fácilmente versiones de Node.js sin complicaciones de variables de entorno ni configuraciones manuales.
  • Gestión flexible de sitios web: Configura, mediante una interfaz intuitiva, proxies inversos y servicio de archivos estáticos para alternar rápidamente entre entornos de desarrollo y producción.
  • SSL integrado: Proporciona certificados SSL gratuitos, de configuración automática para el entorno local, simulando el entorno HTTPS de producción y evitando advertencias de contenido mixto.
  • Soporte para múltiples stacks tecnológicos: Si tu proyecto incluye APIs backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, etc.) o bases de datos (MySQL, PostgreSQL, MongoDB, Redis), ServBay puede integrar todos estos servicios para un entorno full stack local completo. ServBay soporta y mantiene actualizados todos estos paquetes, incluyendo funcionalidades que en el pasado podían no estar completamente soportadas.
  • Backup y restauración de datos: Funciones sencillas de respaldo de configuraciones, sitios, bases de datos y certificados SSL para garantizar la seguridad de tu entorno local de desarrollo.
  • Restablecimiento de contraseñas de bases de datos: Herramienta integrada para resetear contraseñas root de MySQL, MariaDB y PostgreSQL, solucionando uno de los problemas más comunes para desarrolladores.

Preguntas frecuentes (FAQ) ​

  • P: Me aparece command not found: ng al ejecutar ng new o ng serve, ¿qué hago? R: Esto indica que Angular CLI no está correctamente instalado o no se encuentra en tu PATH. Asegúrate de haber instalado @angular/cli globalmente (npm install -g @angular/cli) y que el entorno Node.js de ServBay está correctamente integrado en tu PATH. Intenta reiniciar la terminal o ServBay.
  • P: ng serve falla al iniciar y dice que el puerto está ocupado, ¿cómo lo soluciono? R: El puerto especificado (por ejemplo, 8585) ya está siendo utilizado por otro programa. Usa la opción --port con un número diferente, como ng serve --port 8586, y actualiza el puerto en la configuración de proxy inverso del sitio en ServBay.
  • P: He configurado el sitio en ServBay, pero no carga la página al acceder al dominio local. ¿Qué reviso? R: Verifica lo siguiente:
    • Asegúrate de que ServBay está ejecutándose.
    • En modo desarrollo, que el comando ng serve esté corriendo y el puerto coincida con el configurado en el proxy inverso de ServBay.
    • En modo producción, revisa que el “directorio raíz del sitio” apunte al directorio correcto que contiene index.html (por ejemplo, dist/tu-nombre-de-proyecto).
    • Consulta los logs de ServBay para más detalles sobre posibles errores.
    • Verifica que el dominio que visitas coincide exactamente con el configurado en el sitio de ServBay.
  • P: ¿Puedo utilizar diferentes servidores web en ServBay (Caddy/Nginx/Apache) para servir la versión de producción de Angular? R: Sí, ServBay permite utilizar Caddy, Nginx o Apache como servidores de archivos estáticos. Al configurar un sitio estático, ServBay empleará el servidor web activado en ese momento. Todos estos servidores son altamente eficientes para archivos estáticos.

Resumen ​

Siguiendo esta guía, deberías poder crear y ejecutar un proyecto Angular en el entorno ServBay. Aprendiste a utilizar el proxy inverso de ServBay para acceder al servidor de desarrollo lanzado con ng serve mediante un dominio local, y también cómo construir tu proyecto para producción y alojarlo con el servicio de archivos estáticos de ServBay. Gracias al entorno Node.js integrado, la gestión sencilla de sitios web y el soporte SSL automático de ServBay, mejorarás de forma significativa la eficiencia y experiencia en el desarrollo local con Angular. Además, el soporte integral para diversos stacks tecnológicos de ServBay establece una base sólida para el desarrollo full stack en tu entorno local.