Menggunakan monorepos dengan App Hosting

Dengan monorepo, Anda dapat mengatur dan mengelola beberapa project dalam satu direktori. Panduan ini menjelaskan cara memulai deployment aplikasi berbasis Turborepo atau Nx dengan App Hosting.

Men-deploy monorepo dengan konsol Firebase

Dukungan monorepo disertakan dalam alur penyiapan backend grafis di Firebase konsol. Saat diminta untuk menentukan "Direktori utama" di bagian "Setelan deployment", tentukan jalur ke aplikasi yang ingin Anda deploy di dalam monorepo:

Screenshot tampilan pembuatan backend konsol

Men-deploy monorepo dengan Firebase CLI

Dukungan monorepo disertakan dalam alur penyiapan backend yang dipanggil oleh perintah CLI Firebase apphosting:backends:create. Setelah Anda memasuki alur ini dan menentukan repositori GitHub yang dipilih, Anda akan diminta untuk menentukan direktori utama aplikasi relatif terhadap repositori Anda. Pada perintah ini, teruskan jalur ke aplikasi yang ingin Anda deploy di dalam 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

Misalnya, berikut aset yang akan di-deploy dengan struktur project berikut dan "target-app" sebagai aplikasi yang ingin Anda build dan deploy:

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

Direktori utama aplikasi relatif terhadap repositori Anda adalah apps/target-app.

Memecahkan masalah deployment monorepo

  • Jika Anda tidak menentukan kolom "direktori utama" untuk Nx, build akan gagal dan menampilkan pesan bahwa App Hosting tidak dapat menemukan project yang akan ditargetkan di dalam monorepo Nx. Demikian pula, pengguna Turborepo harus menentukan direktori aplikasi target karena tidak ada konsep project default di Turborepo.
  • Untuk aplikasi Nx + Angular, Anda harus menggunakan builder aplikasi Angular untuk mem-build aplikasi. Builder aplikasi Angular ditentukan dalam project.json