Utilizzare i monorepo con App Hosting

Con i monorepo, puoi organizzare e gestire più progetti in una singola directory. Questa guida descrive come iniziare a eseguire il deployment di app basate su Turborepo o Nx con App Hosting.

Esegui il deployment dei monorepo con la console Firebase

Il supporto per i monorepo è integrato nel flusso di configurazione del backend grafico nella Firebase console. Quando ti viene chiesto di specificare una "directory principale" in "Impostazioni di deployment", specifica il percorso dell'applicazione di cui vuoi eseguire il deployment all'interno del monorepo:

Screenshot della visualizzazione di creazione del backend della console

Esegui il deployment dei monorepo con la Firebase CLI

Il supporto per i monorepo è integrato nel flusso di configurazione del backend richiamato dal Firebase comando CLI apphosting:backends:create. Dopo aver inserito questo flusso e specificato il repository GitHub scelto, ti viene chiesto di specificare la directory principale dell'app rispetto al repository. In questo prompt, passa il percorso dell'applicazione di cui vuoi eseguire il deployment all'interno del monorepo:

$ firebase apphosting:backends:create --project [project-name]
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

Ad esempio, ecco gli asset di cui verrà eseguito il deployment data la seguente struttura del progetto e "target-app" come applicazione di cui vuoi eseguire la build e il deployment:

Nx

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

Turborepo

.
    ├── packages
    ├── apps
    │   └── target-app
    │       ├── package.json
    │       └── src
    │           └── ...
    ├── turbo.json
    ├── package.json
    └── package-lock.json

La directory principale dell'app rispetto al repository è apps/target-app.

Risoluzione dei problemi di deployment dei monorepo

  • Se non specifichi il campo "directory principale" per Nx, la build non andrà a buon fine e verrà visualizzato un messaggio che indica che App Hosting non riesce a trovare un progetto di destinazione all'interno del monorepo Nx. Allo stesso modo, gli utenti di Turborepo devono specificare una directory dell'app di destinazione perché non esiste il concetto di progetto predefinito in Turborepo.
  • Per le applicazioni Nx + Angular, devi utilizzare il builder di applicazioni Angular per creare l'applicazione. Il builder di applicazioni Angular è specificato in project.json.