Um simples passo a passo de como iniciar uma aplicação angular com acesso a um projeto Firebase

firebase-angular-app-get-started.md

Um simples passo a passo de como iniciar uma aplicação angular com acesso a um projeto Firebase

Conhecendo o Firebase

• Visão Geral
  • Visão geral do Firebase por plataforma e por produtos
• Guias
  • Um guia com instruções passo a passo dos recursos do Firebase
• Api Reference
  • Informações detalhadas sobre cada classe e método no SDK do Firebase
• Exemplos
  • Exemplos de inícios rápidos dos recursos disponíveis
• Bibliotecas
  • Diversas bibliotecas, como angularfire, emberfire, reactfire, etc...

Criar um novo projeto no Firebase

• Firebase Console > Adicionar Projeto > Dê um nome ao seu novo projeto
  • Em Localização do Analytics mude para Brazil
  • Local do Cloud Firestore continua igual
  • Aceite os termos do controlador
  • Enjoy seu novo projeto

Referências dos CLIs que serão usados

• Firebase CLI
• Angular CLI

Instalar pacotes globais

• npm install -g @angular/cli
• npm install -g firebase-tools

caso necessário

Criar um projeto Angular

• ng new novo-projeto --routing

Adicionar dependências básicas do projeto

• npm install --save firebase
• npm install --save @angular/fire

ou

• `npm install --save firebase @angular/fire``

Adicionar arquivo firebase config ao projeto

• Firebase Console > project overview > adicionar app> selecionar plataforma web
• criar arquivo firebase.config.ts dentro do projeto angular > environments

Adicionar referências ao app.module.ts

• AngularFireModule
  • Inicializar app com o FirebaseConfig
    • AngularFireModule.initializeApp(FirebaseConfig)
• AngularFireAuthModule
• AngularFireDatabaseModule
• FormsModule

Iniciar o firebase no projeto que foi criado

1. firebase init
   1. Selecionar Functions e Hosting
2. Escolha o projeto que foi criado
3. Em qual linguagem para as Cloud Functions, selecione TypeScript
4. E sim, use o TSLing para pegar prováveis bugs, etc... Y
5. Deixe instalar as dependencias com o npm já Y
6. O diretório que o firebase deve usar para pegar os arquivos publicos será o dist/nome-do-projeto
7. sim para configurar como single-page app y

Adicionar arquivos ao gitignore

• /functions/nodemodules/
• /functions/package-lock.json
• package-lock.json

Configurar método de login

• Firebase Console > authentication > método de login > selecionar o provedor de login desejado > ativar

  • Simplifique usando o provedor Email/senha

Configurar regras da Realtime Database

• Firebase Console > Database > Realtime Database > Regras > Defina as regras para somente leitura e escrita caso o usuário esteja autenticado Exemplo:

{
  "rules": {
        ".read" : "auth != null",
        ".write" : "auth != null"
      }
} 

Checkpoint

A partir desse ponto sua aplicação está apta a autenticar no módulo de authentication pelos provedores ativados e a ler e escrever na realtime database com um usuário autenticado.

Fazer primeiro deploy do site para o hosting do firebase

• Modifique o arquivo app.component.html da maneira que quiser.
• Teste como ficou usando o server do angular ng serve ou o do firebase firebase serve --only hosting, que irá servir os arquivos que estarão na basta dist/nome-do-projeto, o que é ótimo para testar o comportamento que realmente vc terá quando o site estiver publicado
• Faça o build do angular ng build --prod
• Faça o deploy para o firebase hosting com o comando firebase deploy --only hosting

  • --only hosting pq tem o projeto de functions, sem isso, todo deploy iria ser feito tanto do hosting quanto das functions, o que levaria mais tempo

• Após o deploy clique no link que o firebase cli disponibiliza algo como nome-do-projeto.firebaseapp.com e vc irá visualizar o site publicado
• Verifique a publicação no console em Firebase Console > hosting > todos os deploys irão aparecer nessa tela, e estarão versionado, caso seja necessário voltar o anterior

Well, Enjoy your new Firebase project!