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:
- Instalar ServBay: Ya tienes ServBay instalado y ejecutándose en tu macOS.
- 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.
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.
bashnpm install -g @angular/cli
1Este comando instalará
ng
en tu sistema para que puedas usar Angular CLI globalmente.Crear un nuevo proyecto Angular: Navega al directorio raíz recomendado por ServBay para sitios web,
/Applications/ServBay/www
, y utiliza el comandong new
para crear un nuevo proyecto Angular. Se recomienda asignar un nombre identificativo ligado a ServBay, comoservbay-angular-app
.bashcd /Applications/ServBay/www ng new servbay-angular-app
1
2Angular 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
1
2Una vez completado, Angular CLI creará una carpeta llamada
servbay-angular-app
en/Applications/ServBay/www
, conteniendo la estructura y los archivos base del proyecto.Instalar dependencias del proyecto: Accede al directorio del proyecto recién creado e instala todas las dependencias locales necesarias.
bashcd servbay-angular-app npm install
1
2El comando
npm install
lee las dependencias listadas en el archivopackage.json
e instala todo en la carpetanode_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.
Edita el archivo
src/app/app.component.html
: Abre el archivoservbay-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>
1
2
3
4
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.
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 ejemplo8585
, evitando conflictos con el puerto web predeterminado de ServBay.bashcd /Applications/ServBay/www/servbay-angular-app ng serve --port 8585
1
2Este 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.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
a127.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 ejemplo8585
.
Guarda y aplica los cambios en ServBay tras finalizar la configuración.
- Nombre: Por ejemplo,
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.
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:bashcd /Applications/ServBay/www/servbay-angular-app ng build --prod # O en versiones recientes de Angular CLI: # ng build
1
2
3
4El flag
--prod
(por defecto en versiones recientes) habilita optimizaciones como compilación anticipada (AOT), minificación y tree-shaking. Los archivos generados aparecerán endist/servbay-angular-app
(el nombre puede variar según la configuración o el nombre de tu proyecto).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 contieneindex.html
.
Guarda y aplica los cambios en ServBay tras la configuración.
- Nombre: Por ejemplo,
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 ejecutarng new
ong 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, comong 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.