Con l'interfaccia a riga di comando di Firebase compatibile con i framework, puoi eseguire il deployment dell'applicazione Angular su Firebase e pubblicare contenuti dinamici per i tuoi utenti.
Prima di iniziare
Prima di iniziare a eseguire il deployment dell'app su Firebase, esamina i seguenti requisiti e opzioni:
- Firebase CLI versione 12.1.0 o successive. Assicurati di installare la CLI utilizzando il tuo metodo preferito.
(Facoltativo) Fatturazione abilitata nel tuo progetto Firebase (obbligatorio se prevedi di utilizzare il rendering lato server)
(Facoltativo) AngularFire
Inizializza Firebase
Per iniziare, inizializza Firebase per il progetto del framework.
Utilizza la CLI Firebase per un nuovo progetto o modifica firebase.json
per un progetto esistente.
Inizializzare un nuovo progetto
- Nell'interfaccia a riga di comando Firebase, attiva l'anteprima dei framework web:
firebase experiments:enable webframeworks
Esegui il comando di inizializzazione dalla CLI e segui le istruzioni:
firebase init hosting
Rispondi sì alla domanda "Vuoi utilizzare un framework web? (sperimentale)"
Scegli la directory di origine dell'hosting. Potrebbe trattarsi di un'app Angular esistente.
Se richiesto, scegli Angular.
Inizializzare un progetto esistente
Modifica la configurazione dell'hosting in firebase.json
per avere un'opzione source
anziché un'opzione public
. Ad esempio:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
Pubblicare contenuti statici
Dopo aver inizializzato Firebase, puoi pubblicare contenuti statici con il comando di deployment standard:
firebase deploy
Pre-rendering dei contenuti dinamici
Per eseguire il prerendering dei contenuti dinamici in Angular, devi configurare Angular SSR.
ng add @angular/ssr
Per ulteriori informazioni, consulta la guida al prerendering (SSG) di Angular.
(Facoltativo) Aggiungi un modulo server
Esegui deployment
Quando esegui il deployment con firebase deploy
, Firebase crea il bundle del browser, il bundle del server e il prerendering dell'applicazione. Questi elementi vengono implementati
in Hosting e Cloud Functions for Firebase.
Deployment personalizzato
La CLI Firebase presuppone che tu abbia una singola applicazione definita in
angular.json
con una configurazione di build di produzione.
Se devi adattare le ipotesi della CLI, puoi utilizzare la variabile di ambiente FIREBASE_FRAMEWORKS_BUILD_TARGET
o aggiungere AngularFire e modificare angular.json
:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"version": 2,
"buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
}
}
}
(Facoltativo) Eseguire l'integrazione con l'SDK Firebase JS
Quando includi i metodi dell'SDK Firebase JS sia nei bundle server che in quelli client, proteggiti
dagli errori di runtime controllando isSupported()
prima di utilizzare il prodotto.
Non tutti i prodotti sono supportati in tutti gli ambienti.
(Facoltativo) Integrare l'SDK Firebase Admin
I bundle di amministrazione non funzioneranno se sono inclusi nella build del browser, quindi valuta la possibilità di fornirli nel modulo del server e di inserirli come dipendenza facoltativa:
// 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');
Pubblicare contenuti completamente dinamici con il rendering lato server
(Facoltativo) Integrare con Firebase Authentication
Gli strumenti di deployment di Firebase compatibili con i framework web mantengono automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. L'oggetto Express res.locals
conterrà
facoltativamente un'istanza Firebase App autenticata (firebaseApp
) e
l'utente attualmente connesso (currentUser
). Questo può essere inserito nel tuo
modulo tramite il token REQUEST (esportato da @nguniversal/express-engine/tokens).