Com a CLI com reconhecimento de framework do Firebase, é possível implantar o aplicativo Angular no Firebase e disponibilizar conteúdo dinâmico para os usuários.
Antes de começar
Antes de começar a implantação do app no Firebase, confira os seguintes requisitos e opções:
- CLI do Firebase versão 12.1.0 ou mais recente. Instale a CLI usando seu método preferido.
Opcional: ative o faturamento no seu projeto do Firebase (obrigatório se você planeja usar a SSR).
Opcional: AngularFire.
Inicializar o Firebase
Para começar, inicialize o Firebase para seu projeto de framework.
Use a CLI do Firebase para um novo projeto ou modifique firebase.json
para um
projeto que já existe.
Inicializar um novo projeto
- Na CLI do Firebase, ative a visualização de frameworks da Web:
firebase experiments:enable webframeworks
Execute o comando de inicialização da CLI e siga as instruções:
firebase init hosting
Responda "Sim" para "Você quer usar uma estrutura da Web?" (experimental)
Escolha o diretório de origem da hospedagem (pode ser um app Angular que já existe).
Se necessário, escolha o Angular.
Inicializar um projeto que já existe
Altere a configuração de hospedagem em firebase.json
para que haja uma opção source
, em vez
de uma opção public
. Por exemplo:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
Disponibilizar conteúdo estático
Depois de inicializar o Firebase, exiba conteúdos estáticos com o comando de implantação padrão:
firebase deploy
Pré-renderizar conteúdo dinâmico
Para pré-renderizar o conteúdo dinâmico no Angular, é necessário configurar o Angular Universal. A CLI Firebase espera o Express Engine:
ng add @nguniversal/express-engine
Consulte o guia universal do Angular (em inglês) para mais informações.
Adicionar URLs de pré-renderização
Por padrão, somente o diretório raiz será pré-renderizado. Para adicionar outras
rotas, localize a etapa de pré-renderização no angular.json
e adicione mais rotas:
{
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
},
"configurations": {
/* ... */
},
"defaultConfiguration": "production"
}
}
O Firebase também respeita guessRoutes
ou um arquivo routes.txt
na raiz de hospedagem,
se você precisar personalizar mais. Consulte o guia de pré-renderização do
Angular (em inglês) para mais informações sobre essas
opções.
Opcional: adicionar um módulo de servidor
Implantar
Quando você implanta com firebase deploy
, o Firebase cria o pacote de navegador
e o pacote de servidor, bem como pré-renderiza o aplicativo. Esses elementos são implantados
em Hosting e Cloud Functions for Firebase.
Implantação personalizada
A CLI do Firebase pressupõe que você tenha as etapas de servidor, criação e pré-renderização nos esquemas com uma configuração de produção.
Se você quiser personalizar as suposições da CLI, defina ng deploy
e edite a
configuração em angular.json
. Por exemplo, é possível desativar a SSR e disponibilizar
conteúdo pré-renderizado exclusivamente removendo serverTarget
:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"browserTarget": "app:build:production",
"serverTarget": "app:server:production",
"prerenderTarget": "app:prerender:production"
}
}
}
Opcional: integrar com o SDK do Firebase para JavaScript
Ao incluir métodos do SDK do Firebase para JavaScript nos pacotes do servidor e do cliente, proteja
contra os erros de execução verificando isSupported()
antes de usar o produto.
Nem todos os produtos são compatíveis com todos os ambientes.
Opcional: integrar com o SDK Admin do Firebase
Os pacotes de administrador falharão se estiverem incluídos no build do navegador. Portanto, considere fornecer os pacotes no módulo do servidor e injetar como uma dependência opcional:
// 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');
Exibir conteúdo totalmente dinâmico com a SSR
Opcional: integrar com o Firebase Authentication
As ferramentas de implantação do Firebase com reconhecimento de framework da Web usam cookies para manter automaticamente o estado do
cliente e do servidor em sincronia. O objeto res.locals
do Express pode
conter uma instância autenticada do app do Firebase (firebaseApp
) e
o usuário conectado (currentUser
). Isso pode ser injetado no
módulo pelo token REQUEST (exportado de @nguniversal/express-engine/tokens).