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

set 25, 2018

A ideia desse artigo é mostrar como construir rapidamente uma aplicação angular com acesso a um projeto Firebase, informando todos os passos necessários.

Sem falar que tem o vídeo abaixo explicando tudo direitinho =D

[embed]https://www.youtube.com/watch?v=D2K15sAe0wk&feature=youtu.be[/embed]

O gist que aparece no vídeo está aqui https://gist.github.com/evlymn/67ea12e8f4d2f4eec7a2233195cecc72 E eu que achei que apenas ia color o markdown dele aqui no BrazilJS e ia sair feliz, ledo engano... ficou tudo errado, tive que ir arrumando todas as listas, que tristeza.

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

[http://console.firebase.google.com](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 angularfire2
ou
npm install --save firebase angularfire2

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

firebase init
Selecionar Functions e Hosting
Escolha o projeto que foi criado
Em qual linguagem para as Cloud Functions, selecione TypeScript
E sim, use o TSLing para pegar prováveis bugs, etc... `Y`
Deixe instalar as dependencias com o npm já `Y`
O diretório que o firebase deve usar para pegar os arquivos publicos será o `dist/nome-do-projeto`
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

BrazilJS