Este guia detalha o processo de transformaĆ§Ć£o de um ambiente de desenvolvimento Angular em um produto de produĆ§Ć£o hospedado no Firebase, garantindo suporte a Single Page Applications (SPA), conformidade com arquivos de publicidade (ads.txt) e seguranƧa via HTTPS.

1. PreparaĆ§Ć£o da Infraestrutura Link para o cabeƧalho

Antes de enviar os arquivos, Ʃ necessƔrio preparar o terreno no Firebase.

  • Console do Firebase: Crie um novo projeto no Firebase Console.
  • CLI Tools: Instale as ferramentas de linha de comando no seu terminal:

npm install -g firebase-tools firebase login


## 2. O Processo de Build (ProduĆ§Ć£o)

O comando de build compila o TypeScript em JavaScript puro, minifica os arquivos e organiza os recursos na pasta de distribuiĆ§Ć£o.

```bash
npm run build

O que observar no log de saƭda? Link para o cabeƧalho

Ao finalizar, o Angular indicarĆ” o Output Location. Em versƵes modernas, o caminho padrĆ£o Ć©: dist/[nome-do-projeto]/browser

Nota sobre Budgets: Se receber um aviso de Warning: bundle initial exceeded maximum budget, saiba que isso Ć© apenas um alerta de que seus arquivos ultrapassaram o limite padrĆ£o (geralmente 500kb). Para projetos com muitas bibliotecas (como QR Code), isso Ć© normal e nĆ£o impede o funcionamento.

3. ConfiguraĆ§Ć£o do Firebase Hosting Link para o cabeƧalho

Na raiz do seu projeto, execute o comando de inicializaĆ§Ć£o:

firebase init

Durante o assistente, configure as seguintes opƧƵes:

  1. Feature: Escolha Hosting.

  2. Public Directory: Use o caminho indicado no build (ex: dist/bingo-cartelas/browser).

  3. Single-Page App: Escolha YES (y). Isso redireciona todas as rotas para o index.html, permitindo que rotas como /privacidade funcionem corretamente apĆ³s um refresh.

  4. GitHub Action: Escolha NO (n) a menos que deseje integraĆ§Ć£o contĆ­nua.

4. O Arquivo ads.txt e a pasta public Link para o cabeƧalho

Para monetizaĆ§Ć£o com Adsterra ou AdSense, o arquivo ads.txt deve estar na raiz do domĆ­nio.

  • No Angular moderno, coloque o arquivo ads.txt dentro da pasta /public (na raiz do projeto).

  • Ao rodar o build, o Angular moverĆ” automaticamente este arquivo para a pasta final de distribuiĆ§Ć£o, garantindo que ele seja acessĆ­vel em seudominio.com/ads.txt.

5. Arquivo de ConfiguraĆ§Ć£o Final (firebase.json) Link para o cabeƧalho

Sua configuraĆ§Ć£o deve refletir o suporte a SPA para evitar erros 404:

{
  "hosting": {
    "public": "dist/bingo-cartelas/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

6. Deploy e VerificaĆ§Ć£o Link para o cabeƧalho

Com tudo configurado, envie sua aplicaĆ§Ć£o para a nuvem:

firebase deploy

Checklist PĆ³s-Deploy: Link para o cabeƧalho

  1. HTTPS: Verifique se o cadeado de seguranƧa aparece na barra de endereƧos.

  2. NavegaĆ§Ć£o: VĆ” atĆ© a pĆ”gina de Privacidade e recarregue a pĆ”gina (F5). Se nĆ£o der erro 404, o redirecionamento estĆ” correto.

  3. Mobile: Teste o carregamento do QR Code e dos banners do Adsterra no celular.

Seu aplicaĆ§Ć£o agora estĆ” online e pronto para escalar!