MULTI PROYECTOS

1. Crea un espacio de trabajo nuevo con el comando:

( Recuerda que si estas en idx solo necesitas crear un espacio de trabajo predeterminado con ANGULAR)

 ng new myapp

Que pasarà: se creara un espacio de trabajo Angular donde podremos crear varias apps secundarias y asi convertir nuestra app ùnica en una app multiapp que podremos combinar para usar un dominio principal miempresa.com en una app y subdominios admin.miempresa.com, clientes.miempresa.com, procesos.miempresa.com.

Cada app del espacio de trabajo estara conectada a un hosting de firebase cada una con su subdominio, peritiendonos tener un sistemas mas robusto de aplicaciones para cada usop especifico dentro de la empresa, conectada a una sola base de datos o incluso a varias bases de datos.

 ng generate applicacion app2

 ng generate applicacion app3

 ng generate applicacion app4

1. Primero dento de una terminal dentro del proyecto procedemos a instalar firebase-tools con el comando:

 ng generate application app4

¡Claro que sí! Aquí te explico paso a paso cómo generar tres proyectos dentro de un mismo espacio de trabajo de Angular y cómo lanzar el servidor de cada aplicación individualmente:

Paso 1: Crear el Espacio de Trabajo de Angular (si aún no lo tienes)

Si ya tienes un espacio de trabajo de Angular, puedes saltarte este paso. Si no, abre tu terminal o símbolo del sistema y ejecuta el siguiente comando:

Bash

ng new mi-espacio-de-trabajo --create-application=false

cd mi-espacio-de-trabajo

• ng new mi-espacio-de-trabajo: Crea un nuevo espacio de trabajo llamado "mi-espacio-de-trabajo". La opción --create-application=false indica que no queremos que se cree una aplicación por defecto en este momento.

• cd mi-espacio-de-trabajo: Navega al directorio del espacio de trabajo recién creado.

Paso 2: Generar las Tres Aplicaciones Dentro del Espacio de Trabajo

Dentro del directorio de tu espacio de trabajo (mi-espacio-de-trabajo), ejecuta los siguientes comandos para generar cada una de tus aplicaciones:

Bash

ng generate application aplicacion1

ng generate application aplicacion2

ng generate application aplicacion3

• ng generate application aplicacion1: Crea una nueva aplicación llamada "aplicacion1" dentro de la carpeta projects de tu espacio de trabajo.

• Repite este comando para aplicacion2 y aplicacion3.

Ahora, dentro de la carpeta projects de tu espacio de trabajo, deberías tener tres carpetas: aplicacion1, aplicacion2 y aplicacion3, cada una conteniendo la estructura de un proyecto Angular independiente.

Paso 3: Lanzar el Servidor de Cada Aplicación Individualmente

Para lanzar el servidor de desarrollo de cada aplicación, debes especificar el nombre del proyecto al usar el comando ng serve. Abre tres ventanas de terminal o pestañas diferentes. En cada una, navega al directorio raíz de tu espacio de trabajo (mi-espacio-de-trabajo) y ejecuta los siguientes comandos:

• Para la primera aplicación:

• Bash

ng serve aplicacion1 -o

• 
  

• La opción -o (o --open) abrirá automáticamente tu navegador en la dirección predeterminada de la primera aplicación (generalmente http://localhost:4200).

• Para la segunda aplicación:

• Bash

ng serve aplicacion2 -p 4201 -o

• 
  

• Aquí, usamos la opción -p 4201 para especificar que esta aplicación se sirva en el puerto 4201. Esto es necesario para evitar conflictos con la primera aplicación que ya está usando el puerto 4200. La opción -o abrirá esta aplicación en http://localhost:4201.

• Para la tercera aplicación:

• Bash

ng serve aplicacion3 -p 4202 -o

• 
  

• De manera similar, usamos -p 4202 para que esta aplicación se sirva en el puerto 4202. Se abrirá en http://localhost:4202.

En resumen, los pasos son:

1. Crear el espacio de trabajo (si es necesario): ng new mi-espacio-de-trabajo --create-application=false y cd mi-espacio-de-trabajo.

2. Generar las aplicaciones:

   • ng generate application aplicacion1

   • ng generate application aplicacion2

   • ng generate application aplicacion3

3. Lanzar los servidores individualmente (en terminales separadas):

   • Para aplicacion1: ng serve aplicacion1 -o

   • Para aplicacion2: ng serve aplicacion2 -p 4201 -o

   • Para aplicacion3: ng serve aplicacion3 -p 4202 -o

¡Y listo! Ahora tendrás tres aplicaciones Angular corriendo simultáneamente en diferentes puertos dentro de tu espacio de trabajo. Puedes acceder a cada una a través de sus respectivas direcciones en tu navegador. ¡Espero que esto te sea de gran ayuda! Avísame si tienes alguna otra pregunta.

¡Excelente pregunta! Para desplegar tus tres aplicaciones Angular, generadas dentro del mismo espacio de trabajo, en tres hostings distintos dentro de un único proyecto de Firebase, necesitarás configurar tu archivo firebase.json de la siguiente manera.

Entendiendo la Configuración de firebase.json para Hosting Múltiple

La clave para desplegar múltiples sitios desde un solo proyecto de Firebase radica en la sección hosting dentro de firebase.json. En lugar de un único objeto de configuración, utilizarás un array de objetos, donde cada objeto define la configuración para un sitio de hosting individual.

Paso 1: Editar el Archivo firebase.json

Abre el archivo firebase.json que se encuentra en la raíz de tu espacio de trabajo de Angular. Reemplaza su contenido (o modifícalo si ya existe) con una estructura similar a esta:

JSON

{

  "hosting": [

    {

      "target": "aplicacion1",

      "public": "dist/aplicacion1/browser",

      "ignore": [

        "firebase.json",

        "**/.*",

        "**/node_modules/**"

      ],

      "rewrites": [

        {

          "source": "**",

          "destination": "/index.html"

        }

      ]

    },

    {

      "target": "aplicacion2",

      "public": "dist/aplicacion2/browser",

      "ignore": [

        "firebase.json",

        "**/.*",

        "**/node_modules/**"

      ],

      "rewrites": [

        {

          "source": "**",

          "destination": "/index.html"

        }

      ]

    },

    {

      "target": "aplicacion3",

      "public": "dist/aplicacion3/browser",

      "ignore": [

        "firebase.json",

        "**/.*",

        "**/node_modules/**"

      ],

      "rewrites": [

        {

          "source": "**",

          "destination": "/index.html"

        }

      ]

    }

  ],

  "functions": {

    "predeploy": [

      "npm --prefix \"./functions\" run lint",

      "npm --prefix \"./functions\" run build"

    ]

  }

}

Desglosando la Configuración:

• hosting: Este es el array principal que define la configuración de tus sitios de hosting. Cada objeto dentro de este array representa un sitio individual.

• target: Este campo es crucial. Debe coincidir con el nombre del "target" que definirás al ejecutar el comando de despliegue de Firebase para cada aplicación. Usualmente, se recomienda usar el mismo nombre que el de la aplicación (por ejemplo, aplicacion1, aplicacion2, aplicacion3).

• public: Especifica la ruta al directorio de los archivos estáticos construidos para cada aplicación. Angular genera estos archivos dentro de la carpeta dist. Asumiendo que has construido tus aplicaciones usando ng build aplicacion1 --prod, ng build aplicacion2 --prod, etc., la ruta correcta será dist/nombre-de-la-aplicacion/browser.

• ignore: Define los archivos y directorios que Firebase CLI debe ignorar al desplegar. Las configuraciones por defecto suelen ser adecuadas.

• rewrites: Esta sección es importante para las aplicaciones de Angular que utilizan enrutamiento del lado del cliente. La regla "source": "**", "destination": "/index.html" asegura que cualquier ruta no coincidente se redirija al archivo index.html de tu aplicación, permitiendo que el enrutador de Angular maneje la navegación.

• functions: Esta sección es para la configuración de Firebase Functions y no es directamente relevante para el despliegue de hosting múltiple, pero suele estar presente en el archivo firebase.json.

Paso 2: Construir tus Aplicaciones para Producción

Antes de desplegar, asegúrate de construir cada una de tus aplicaciones Angular para producción. Desde la raíz de tu espacio de trabajo, ejecuta los siguientes comandos:

Bash

ng build aplicacion1 --prod

ng build aplicacion2 --prod

ng build aplicacion3 --prod

Esto creará las carpetas dist/aplicacion1/browser, dist/aplicacion2/browser, y dist/aplicacion3/browser con los archivos optimizados para el despliegue.

Paso 3: Desplegar Cada Aplicación a su Hosting Individual

Ahora, para desplegar cada aplicación al hosting correspondiente en tu proyecto de Firebase, utilizarás el comando firebase deploy con la opción --only hosting:<target-name>, donde <target-name> coincide con el valor del campo "target" que definiste en tu firebase.json.

Asumiendo que ya has inicializado Firebase en tu proyecto (firebase init), ejecuta los siguientes comandos desde la raíz de tu espacio de trabajo:

Bash

firebase deploy --only hosting:aplicacion1

firebase deploy --only hosting:aplicacion2

firebase deploy --only hosting:aplicacion3

Firebase CLI desplegará los archivos de cada aplicación desde su respectiva carpeta dist al sitio de hosting configurado con el target especificado.

Consideraciones Adicionales:

• Creación de Sitios de Hosting en Firebase: Asegúrate de haber creado previamente los tres sitios de hosting dentro de tu proyecto de Firebase a través de la consola de Firebase. Cada sitio tendrá su propia URL de Firebase (nombre-del-sitio.web.app y nombre-del-sitio.firebaseapp.com).

• Nombres de los Sitios de Hosting: Los nombres de los sitios de hosting en la consola de Firebase no tienen que coincidir necesariamente con los valores de "target" en firebase.json, pero usar nombres descriptivos y consistentes facilitará la administración.

• Dominios Personalizados: Si deseas utilizar dominios personalizados para cada una de tus aplicaciones, deberás configurarlos por separado para cada sitio de hosting en la consola de Firebase después del despliegue inicial.

• Firebase CLI: Asegúrate de tener instalado y configurado Firebase CLI en tu máquina. Puedes instalarlo con npm install -g firebase-tools y luego iniciar sesión con firebase login.

• Revisión Después del Despliegue: Después de cada despliegue, verifica las URLs proporcionadas por Firebase CLI para asegurarte de que cada aplicación se haya desplegado correctamente en su respectivo sitio de hosting.

Siguiendo estos pasos, podrás configurar tu firebase.json para desplegar tus tres aplicaciones Angular en hostings distintos dentro de tu proyecto de Firebase. ¡Espero que esta explicación detallada te sea de gran utilidad! Si tienes alguna otra duda, no dudes en preguntar.

¡Excelente pregunta! La herramienta de "preview" de Firebase Hosting te permite ver los cambios de tu sitio en una URL temporal antes de desplegarlos a tu sitio en vivo. Sin embargo, la funcionalidad de preview está diseñada para un único sitio de hosting por comando.

El Desafío con Hosting Múltiple y Preview Directo

La Firebase CLI no ofrece una forma directa de generar URLs de preview simultáneamente para múltiples targets de hosting con un solo comando. El comando firebase hosting:channel:deploy (o firebase deploy --only hosting:<target> --channel <nombre-del-canal>) está diseñado para un target específico a la vez.

El Procedimiento para Previsualizar Cada Hosting Individualmente:

La manera de previsualizar cada una de tus aplicaciones en hostings separados sería crear un canal de preview para cada target de hosting individualmente. Aquí te explico los pasos:

1. Crear Canales de Preview (si no existen):

Puedes crear un canal de preview para cada una de tus aplicaciones usando el siguiente comando:

Bash

firebase hosting:channel:create preview-aplicacion1

firebase hosting:channel:create preview-aplicacion2

firebase hosting:channel:create preview-aplicacion3

• preview-aplicacion1, preview-aplicacion2, preview-aplicacion3: Estos son los nombres que le estás dando a tus canales de preview. Puedes elegir los nombres que prefieras.

2. Desplegar a los Canales de Preview:

Luego, para desplegar la versión de preview de cada aplicación, utiliza el siguiente comando, especificando el target de hosting y el canal de preview que creaste:

Bash

firebase hosting:channel:deploy preview-aplicacion1 --only hosting:aplicacion1

firebase hosting:channel:deploy preview-aplicacion2 --only hosting:aplicacion2

firebase hosting:channel:deploy preview-aplicacion3 --only hosting:aplicacion3

• firebase hosting:channel:deploy <nombre-del-canal> --only hosting:<nombre-del-target>: Este comando despliega el contenido del public directory asociado al target especificado al canal de preview que has nombrado.

3. Obtener las URLs de Preview:

Después de ejecutar cada comando de despliegue al canal, Firebase CLI te proporcionará una URL de preview temporal para cada aplicación. Estas URLs tendrán una estructura similar a:

• https://<nombre-del-canal>--<nombre-del-target>--<tu-proyecto-id>.web.app

• https://<nombre-del-canal>--<nombre-del-target>--<tu-proyecto-id>.firebaseapp.com

En resumen, el procedimiento sería:

1. Crear un canal de preview para cada uno de tus targets de hosting (si aún no existen).

2. Desplegar cada aplicación a su respectivo canal de preview utilizando el comando firebase hosting:channel:deploy con las opciones --only hosting:<target> y el nombre del canal.

3. Firebase CLI te proporcionará una URL única para previsualizar cada aplicación.

Consideraciones:

• Nombres de los Canales: Elige nombres descriptivos para tus canales de preview para facilitar su identificación.

• Duración de los Canales: Los canales de preview son temporales y expiran después de un tiempo (por defecto, 7 días, pero puedes configurarlo).

• Aislamiento de Backends (Parcial): Ten en cuenta que, por defecto, las URLs de preview interactúan con tu backend real de Firebase (Firestore, Functions, etc.). Si necesitas un entorno de pruebas completamente aislado, considera usar el Firebase Emulator Suite.

• Automatización (Opcional): Si realizas previsualizaciones con frecuencia, podrías considerar automatizar la creación y despliegue a canales de preview utilizando scripts o integraciones con tu sistema de control de versiones (como GitHub Actions).

Aunque no hay un comando único para obtener previews de múltiples hostings simultáneamente, este método de crear y desplegar a canales de preview te permitirá inspeccionar los cambios de cada una de tus aplicaciones antes de hacer el despliegue final a los sitios en vivo. ¡Espero que esta explicación te sea útil! ¿Tienes alguna otra pregunta?