Criar protótipos e testar apps da Web com o emulador do Firebase Hosting

Antes de começar a prototipar e testar seu aplicativo da web com o emulador do Firebase Hosting, é importante entender o fluxo de trabalho geral do Firebase Local Emulator Suite. e que você instale e configure o Local Emulator Suite e revise os comandos da CLI.

Você também precisa conhecer os recursos e o fluxo de trabalho de implementação para Firebase Hosting. Comece com a introdução ao Firebase Hosting.

O que posso fazer com o emulador de Firebase Hosting?

O emulador de Firebase Hosting oferece emulação local de alta fidelidade dos serviços de Hosting, fornecendo grande parte da funcionalidade encontrada em produção Hosting. O emulador de Hosting permite que você:

  • Criar protótipos de sites e apps da Web estáticos sem gerar cobranças de acesso ou armazenamento.
  • Desenvolver protótipos, testar e depurar funções HTTPS antes de implantá-las no seu site do Hosting.
  • Testar sites e apps da Web em fluxos de trabalho conteinerizados e de integração contínua.

Escolher um projeto do Firebase

O Firebase Local Emulator Suite emula produtos para um único projeto do Firebase.

Na CLI, execute firebase use no diretório de trabalho antes de iniciar os emuladores para selecionar o projeto a ser usado. Como opção, é possível transmitir a flag --project para cada comando do emulador.

Local Emulator Suite oferece suporte à emulação de projetos reais do Firebase e projetos de demonstração.

Tipo de projeto Recursos Usar com emuladores
Real

Um projeto real do Firebase é aquele que você criou e configurou (provavelmente pelo console do Firebase).

Os projetos reais têm recursos ativos, como instâncias de banco de dados, buckets de armazenamento, funções ou qualquer outro recurso configurado para o projeto do Firebase.

Ao trabalhar com projetos reais do Firebase, é possível executar emuladores para qualquer um ou todos os produtos suportados.

Para todos os produtos que você não estiver emulando, os apps e o código interagem com recursos ativos, como o banco de dados, o bucket de armazenamento, a função etc.

Demonstração

Um projeto de demonstração do Firebase não tem configuração real nem recursos ativos. Em geral, esses projetos são acessados usando codelabs ou outros tutoriais.

Os IDs dos projetos de demonstração têm o prefixo demo-.

Ao trabalhar com projetos de demonstração do Firebase, os apps e códigos interagem apenas com emuladores. Se o app tentar interagir com um recurso em que um emulador não esteja em execução, o código falhará.

Recomendamos que você use projetos de demonstração sempre que possível. Alguns dos benefícios são:

  • Configuração mais fácil, já que é possível executar os emuladores sem precisar criar um projeto do Firebase
  • Mais segurança, já que, se o código invocar acidentalmente recursos não emulados (produção), não haverá chance de alteração, uso e faturamento de dados
  • Melhor suporte off-line, já que não é necessário acessar a Internet para fazer o download da configuração do SDK

Fluxo de trabalho principal de prototipagem

Se você estiver fazendo iterações rápidas ou quiser que o app interaja com os recursos de back-end do projeto emulado, teste o conteúdo e a configuração do Hosting no local. Ao fazer isso, o Firebase disponibiliza seu app da Web em um URL hospedado localmente.

  1. (Opcional) Por padrão, seu app hospedado localmente vai interagir com recursos do projeto reais, e não emulados (funções, bancos de dados, regras etc.). Outra opção é conectar o aplicativo para usar quaisquer recursos de projeto emulados configurados. Saiba mais: Realtime Database | Cloud Firestore | Cloud Functions

  2. Na raiz do diretório do projeto local, execute o seguinte comando:

    firebase emulators:start

  3. Abra seu app da Web no URL local retornado pela CLI (geralmente http://localhost:5000).

  4. Para atualizar o URL local com alterações, atualize o navegador.

Testar usando outros dispositivos locais

Por padrão, os emuladores respondem apenas a solicitações de localhost. Isso significa que será possível acessar seu conteúdo hospedado pelo navegador da Web no seu computador, mas não em outros dispositivos na rede. Se você quiser testar usando outros dispositivos locais, configure seu firebase.json da seguinte maneira:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Gerar tokens de autenticação para fluxos de trabalho de integração contínua

Se os fluxos de trabalho de integração contínua dependerem do Firebase Hosting, será necessário fazer login usando um token para executar firebase emulators:exec. Os outros emuladores não exigem login.

Para gerar um token, execute firebase login:ci no ambiente local. Você não deve fazer isso em um sistema de CI. Siga as instruções para fazer a autenticação. É necessário executar essa etapa apenas uma vez por projeto, já que o token é válido para todos os builds. O token deve ser tratado como uma senha e mantido em segredo.

Se o ambiente de CI permitir que você especifique variáveis de ambiente que podem ser usadas nos scripts de build, basta criar uma variável de ambiente chamada FIREBASE_TOKEN, com o valor sendo a string do token de acesso. A CLI do Firebase vai selecionar a variável de ambiente FIREBASE_TOKEN de forma automática, e os emuladores serão iniciados corretamente.

Como último recurso, você pode simplesmente incluir o token no script de build, mas garanta que as partes não confiáveis não tenham acesso. Para esse método codificado, adicione --token "YOUR_TOKEN_STRING_HERE" ao comando firebase emulators:exec.

A seguir