Angular Evrensel'i Entegre Etme

Firebase çerçevesine duyarlı KSA ile Angular uygulamanızı Firebase'e dağıtabilir ve kullanıcılarınıza dinamik içerikler sunabilirsiniz.

Başlamadan önce

Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki gereksinimleri ve seçenekleri inceleyin:

• Firebase CLI 12.1.0 veya üzeri sürümler. Tercih ettiğiniz yöntemi kullanarak KSA'yı yüklediğinizden emin olun.

• İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirilmiş (SSR kullanmayı planlıyorsanız gereklidir)

• İsteğe bağlı: AngularFire

Firebase'i başlatma

İlk olarak, çerçeve projeniz için Firebase'i başlatın. Yeni bir proje için Firebase CLI'yı kullanın veya mevcut bir proje için firebase.json öğesini değiştirin.

Yeni bir projeyi ilk kullanıma hazırlama

1. Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin:

   firebase experiments:enable webframeworks

2. KSA'dan başlatma komutunu çalıştırın ve istemleri takip edin:

   firebase init hosting

3. "Web çerçevesi kullanmak istiyor musunuz? (deneysel)"

4. Barındırma kaynak dizininizi seçin. Bu, mevcut bir Angular uygulaması olabilir.

5. İstenirse, Angular'ı seçin.

Mevcut bir projeyi başlatma

firebase.json uygulamasındaki barındırma yapılandırmanızı public seçeneği yerine source seçeneği olacak şekilde değiştirin. Örnek:

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

Statik içerik sunma

Firebase'i başlattıktan sonra standart dağıtım komutuyla statik içerik sunabilirsiniz:

firebase deploy

Dinamik içeriği önceden oluşturma

Angular'da dinamik içeriği önceden oluşturmak için Angular Universal'ı ayarlamanız gerekir. Firebase CLI, Express Engine'in kullanılmasını bekler:

ng add @nguniversal/express-engine

Daha fazla bilgi için Angular Evrensel kılavuzuna bakın.

Önceden oluşturma URL'leri ekleme

Varsayılan olarak yalnızca kök dizin önceden işlenir. angular.json konumunda önceden oluşturma adımını bularak ve daha fazla rota ekleyerek başka rotalar ekleyebilirsiniz:

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

Daha fazla özelleştirme yapmanız gerekirse Firebase, barındırma kök dizininde guessRoutes veya routes.txt dosyasını dikkate alır. Bu seçeneklerle ilgili daha fazla bilgi için Angular’ın önceden oluşturma kılavuzuna bakın.

İsteğe bağlı: bir sunucu modülü ekleyin

Dağıtma

firebase deploy ile dağıtım yaptığınızda Firebase, tarayıcı paketinizi ve sunucu paketinizi oluşturur ve uygulamayı önceden oluşturur. Bu öğeler, Hosting ve Cloud Functions for Firebase'e dağıtılır.

Özel dağıtım

Firebase CLI, şemalarınızda üretim yapılandırmasıyla sunucu, derleme ve önceden işleme adımlarınızın olduğunu varsayar.

KSA varsayımlarını uyarlamak istiyorsanız ng deploy politikasını yapılandırın ve angular.json üzerinde yapılandırmayı düzenleyin. Örneğin, SSR'yi devre dışı bırakabilir ve serverTarget öğesini kaldırarak önceden oluşturulmuş içeriği özel olarak sunabilirsiniz:

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

İsteğe bağlı: Firebase JS SDK ile entegrasyon

Hem sunucu hem de istemci paketlerine Firebase JS SDK yöntemleri eklerken, ürünü kullanmadan önce isSupported() öğesini kontrol ederek çalışma zamanı hatalarına karşı koruma sağlayın. Tüm ürünler tüm ortamlarda desteklenmez.

İsteğe bağlı: Firebase Admin SDK ile entegrasyon

Yönetici paketleri tarayıcı derlemenize dahil edilirse başarısız olur. Bu nedenle, bunları sunucu modülünüze sağlamayı ve isteğe bağlı bir bağımlılık olarak eklemeyi düşünebilirsiniz:

// 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');

SSR ile tam dinamik içerik sunma

İsteğe bağlı: Firebase Authentication ile entegrasyon

Web çerçevesine duyarlı Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize eder. Express res.locals nesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase Uygulama örneğini (firebaseApp) ve o anda oturum açmış olan kullanıcıyı (currentUser) içerir. Bu, REQUEST jetonu (@nguniversal/express-engine/tokens'dan dışa aktarılır) aracılığıyla modülüünüze eklenebilir.