Testando localmente aplicações com Firebase Emulator
Já pensou em testar toda sua aplicação localmente, sem precisar criar um projeto no firebase para testes? É possível emular algumas ferramentas do firebase como authentication, hosting, firestore, functions, database e pubsub.
Gostou da ideia? Então vamos lá!
Pré-requisito:
- Ter a versão mais recente do firebase-tools instalado via NPM e configurado.
Após a instalação do firebase-tools, é possível inicializar e configurar seu projeto do firebase através do comando:
firebase init
Através desse comando também é possível configurar o emulador e escolher as ferramentas que iremos emular, seguindo os passos abaixo.
Configuração emulador
Selecionar a opção Emulators
Selecionar as ferramentas que irá emular, de acordo com a necessidade do seu projeto.
Definir as portas que as ferramentas irão rodar quando o emulador for iniciado.
Após a configuração do emulador através do comando firebase init, o arquivo firebase.json será criado/alterado com as configurações realizadas.
Após a configuração do emulador, vamos ao nosso projeto de exemplo.
O projeto foi desenvolvido em FlutterWeb e segue a estrutura conforme imagem abaixo:
Para que nosso projeto seja executado levando em consideração o emulador, vamos realizar algumas configurações no arquivo main (Arquivo inicial do flutter), assim quando chamarmos uma function ou consultarmos o firestore, o projeto não olhe para o ambiente de produção, e sim para o emulador local.
Vamos começar criando o arquivo main_dev.dart que irá conter as configurações do emulador e será utilizado quando executado em ambiente de desenvolvimento.
Nesse caso estamos configurando o firestore e a functions, mas caso não utilize um deles, basta configurar apenas a ferramenta desejada.
Conforme descrito, utilizamos o Flutter para o exemplo, porém o mesmo processo funciona para outras tecnologias, como React.
O próximo passo é executar o emulador, e para isso iremos criar um arquivo bat como todos os passos necessários para iniciar nosso ambiente.
Iremos criar esse arquivo na raiz do projeto como o nome ‘InitializeDevEnvironment.bat’.
Iremos detalhar melhor código abaixo:
Nesse arquivo temos três passos principais:
- flutter clean: Limpar o último build, para não termos problema na geração do novo build apontando para o emulador.
- flutter build web -t lib/main_dev.dart: Gerar um novo build considerando o main_dev como arquivo de inicialização.
- firebase emulator:start: Irá iniciar o emulador com as ferramentas informadas na tag — only.
- — export-on-exit: Esse comando, será encarregado de exportar esses dados para um arquivo que fica localizado na pasta ‘firestore_export’ ao encerrar o emulador.
- — import=./firestore_export: Irá importar os dados exportados no passo anterior e insere no firestore, sendo possível testar com dados inseridos em execuções anteriores.
Por fim, agora basta executar esse arquivo que irá abrir uma janela do prompt de comando e iniciar o emulador:
Agora basta você acessar o endereço da UI do emulador (Endereço default http://localhost:4000)
E aparecerá essa tela:
Será exibido as ferramentas disponíveis no emulador, porém só irão estar ativos as configuradas nos passos anteriores.
Ao clicar no firestore, irá abrir uma página muito semelhante ao firestore real, onde já poderá inserir dados para seus testes.
Em functions poderá ver os logs das functions quando elas forem executadas.
Em hosting abrirá sua aplicação web configurada junto com o emulador, sem refletir no ambiente de produção.
Conclusão
Como você viu, podemos obter o poder do Firebase em nossa máquina local e isso pode ser feito com uma configuração simples.
Isso é tudo, obrigado por ler. Até mais!
