Menggunakan monorepos dengan App Hosting

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

Men-deploy monorepo dengan konsol Firebase

Dukungan monorepo dibuat ke dalam alur penyiapan backend grafis di konsol Firebase. Saat diminta untuk "Direktori root" 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 root aplikasi relatif terhadap repositori; 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 adalah aset yang akan di-deploy dengan struktur project berikut dan "target-app" sebagai aplikasi yang ingin Anda bangun 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 root aplikasi relatif terhadap repositori Anda adalah apps/target-app.

Memecahkan masalah deployment monorepo

  • Jika Anda tidak menentukan kolom "root directory" 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 membangun aplikasi. Builder aplikasi Angular ditentukan di project.json