Instantly share code, notes, and snippets.

Embed
What would you like to do?
Um simples passo a passo de como iniciar uma aplicação angular com acesso a um projeto Firebase

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

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment