Skip to content

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
You can’t perform that action at this time.