Usa monorepos con App Hosting

Con monorepos, puedes organizar y administrar varios proyectos en un solo directorio. En esta guía, se describe cómo comenzar a implementar apps basadas en Nx con App Hosting.

Implementa monorepos con Firebase CLI

La compatibilidad con monorepo está integrada en el flujo de configuración del backend que invoca el comando apphosting:backends:create de Firebase CLI. Después de ingresar a este flujo y especificar el repositorio de GitHub que elegiste, se te pedirá que especifiques el directorio raiz de tu app en relación con tu repositorio. En esta indicación, pasa la ruta de acceso a la aplicación que deseas implementar dentro del monorepo:

$ firebase apphosting:backends:create --project [project-name] --location us-central1
i  === Import a GitHub repository
✔  Connected with GitHub successfully

? Which GitHub repo do you want to deploy? gh-username/nx-monorepo
? Specify your app's root directory relative to your repository path/to/app

Por ejemplo, estos son los recursos que se implementarían con la siguiente estructura de proyecto de Nx y “target-app” como la aplicación que deseas compilar e implementar:

.
    ├── lib
    ├── apps
    │   └── target-app
    │       ├── project.json
    │       └── src
    │           └── ...
    ├── nx.json
    ├── package-lock.json
    └── package.json

El directorio raíz de la app en relación con tu repositorio es apps/target-app.

Implementa monorepos con Firebase console

La compatibilidad con monorepo está integrada en el flujo de configuración gráfica del backend en Firebase console. Cuando se te solicite un "directorio raíz" en "Configuración de implementación", especifica la ruta de acceso a la aplicación que deseas implementar dentro del monorepo:

Captura de pantalla de la vista de creación del backend de la consola

Soluciona problemas de implementación de monorepo

  • Si dejas el campo "directorio raíz" en blanco durante la configuración del backend, es posible que App Hosting aún pueda compilar e implementar el proyecto de destino del usuario si se especifica en el defaultProject del archivo de configuración nx.json relacionado.
  • Si no especificas el campo "directorio raíz" ni defaultProject, la compilación fallará y se mostrará un mensaje que indica que App Hosting no puede encontrar un proyecto para orientar dentro del monorepo Nx.
  • En el caso de las aplicaciones de Nx + Angular, debes usar el compilador de aplicaciones de Angular para compilarlas. El compilador de aplicaciones de Angular se especifica en project.json.