Mengintegrasikan Angular Universal

Dengan CLI berbasis framework Firebase, Anda dapat men-deploy aplikasi Angular ke Firebase dan menayangkan konten dinamis kepada pengguna.

Sebelum memulai

Sebelum Anda mulai men-deploy aplikasi Angular Universal ke Firebase, tinjau persyaratan dan opsi berikut:

  • Firebase CLI versi 11.14.2 atau yang lebih baru. Pastikan untuk menginstal CLI menggunakan metode pilihan Anda.
  • Opsional: Penagihan diaktifkan di project Firebase Anda (wajib jika Anda berencana menggunakan SSR)
  • Opsional: AngularFire

Menginisialisasi Firebase

Untuk memulai, lakukan inisialisasi Firebase untuk project framework Anda. Gunakan Firebase CLI untuk project baru, atau ubah firebase.json untuk project yang sudah ada.

Menginisialisasi project baru

  1. Di Firebase CLI, aktifkan pratinjau framework web: 
    firebase experiments:enable webframeworks
  2. Jalankan perintah inisialisasi dari CLI, lalu ikuti petunjuknya: 
    firebase init hosting
  3. Pilih direktori sumber hosting Anda; ini bisa berupa aplikasi Angular yang sudah ada.
  4. Pilih "Hosting web dinamis dengan framework web".
  5. Pilih Angular.

Menginisialisasi project yang sudah ada

Ubah konfigurasi hosting Anda di firebase.json agar memiliki opsi source, bukan opsi public. Contoh:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

Menayangkan konten statis

Setelah menginisialisasi Firebase, Anda dapat menayangkan konten statis dengan perintah deployment standar:

firebase deploy

Merender konten dinamis di awal

Untuk melakukan prarender konten dinamis di Angular, Anda perlu menyiapkan Angular Universal. Firebase CLI mengharapkan Express Engine:

ng add @nguniversal/express-engine

Lihat panduan Angular Universal untuk informasi selengkapnya.

Menambahkan URL pra-render

Secara default, hanya direktori utama yang akan dirender di awal. Anda dapat menambahkan rute tambahan dengan menemukan langkah pra-render di angular.json dan menambahkan lebih banyak rute:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": [
        "/",
        "ANOTHER_ROUTE",
        "AND_ANOTHER"
      ]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase juga mengikuti file guessRoutes atau routes.txt di root hosting, jika Anda perlu menyesuaikan lebih lanjut. Lihat panduan pra-rendering Angular untuk mengetahui informasi selengkapnya tentang opsi tersebut.

Opsional: menambahkan modul server

Men-deploy

Ketika Anda men-deploy dengan firebase deploy, Firebase akan mem-build paket browser, paket server, dan melakukan pra-render aplikasi. Elemen ini di-deploy ke Hosting dan Cloud Functions for Firebase.

Men-deploy kustom

Firebase CLI mengasumsikan bahwa Anda memiliki langkah-langkah server, build, dan pra-render dalam skema Anda dengan konfigurasi produksi.

Jika Anda ingin menyesuaikan asumsi CLI, konfigurasikan ng deploy dan edit konfigurasi di angular.json. Misalnya, Anda dapat menonaktifkan SSR dan menayangkan konten yang telah dirender sebelumnya secara eksklusif dengan menghapus serverTarget:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

Opsional: mengerintegrasikan dengan Firebase JS SDK

Ketika Anda menyertakan metode Firebase JS SDK di paket server dan klien, jaga agar tidak terjadi error runtime dengan memeriksa isSupported() sebelum menggunakan produk. Tidak semua produk didukung di semua lingkungan.

Opsional: mengintegrasikan dengan Firebase Admin SDK

Paket admin akan gagal jika disertakan dalam build browser Anda, jadi pertimbangkan untuk menyediakannya dalam modul server dan memasukkannya sebagai dependensi opsional:

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

Menayangkan konten yang sepenuhnya dinamis dengan SSR

Opsional: mengintegrasikan dengan Firebase Authentication

Alat deployment Firebase berbasis framework web secara otomatis menyinkronkan status klien dan server menggunakan cookie. Objek res.locals Express secara opsional akan berisi instance Aplikasi Firebase yang diautentikasi (firebaseApp) dan pengguna yang sedang login (currentUser). Ini dapat dimasukkan ke dalam modul Anda melalui token REQUEST (diekspor dari @nguniversal/express-engine/tokens).