Simples aplicação real time com angular 4 e firebase, parte 4

Em:

Nesse artigo irei mostrar o como fazer o deploy para o firebase, para isso iremos usar o firebase-tools que gerencia todo esse contexto.

Após as configurações feitas iremos fazer a publicação do nosso aplicativo no firebase usando Firebase Hosting

Para isso iremos instalar o firebase-tools e iniciar o firebase na pasta do app, no terminal digite:

npm install -g firebase-tools
npm install -g firebase-tools

npm install -g firebase-tools

Vai instalar um horror de coisas mas não se preocupe, tudo vai da certo. No final do processo digite:

firebase init
inicializando o firebase na nossa aplicação

inicializando o firebase na nossa aplicação

Vc pode notar que tanto database, functions e hosting estão selecionados, vc pode deixar assim, isso não irá influenciar no que iremos fazer. Pressione enter veremos mais detalhes

seleção da projeto

seleção da projeto

Selecione com as setas o projeto que estamos trabalhando e pressione enter

Configurações base de dados

Configurações base de dados

Nesse passo ele pergunta se vc quer usar o arquivo database.rules.json para administrar as regras da base de dados, diga que sim apertando enter

Functions

Functions

Aqui ele avisa que irá precisar instalar algumas dependências para as functions serem instaladas e configuradas, diga que sim com Y

configurando o hosting

configurando o hosting

Ele está perguntando aonde os arquivo que irão ser publicados ficarão, no caso a pasta public, apenas pressione enter

index.html

index.html

Enviar todo mundo para index.html, sim por favor.

Configurado!!!

Configurado!!!

Configuração feita! \0/ Agora vamos fazer um build de nossa aplicação, para isso digite no terminal

ng build --prod
Buildado

Buildado

Vamos ver aonde esses arquivos gerados pelo ng build estão

Ooops

Ooops

Houston we have a problem, pois ele gerou em dist mas a pasta que definimos para o Firebase Hosting é a public, e lá só tem o index.html…. Oh, e agora, o que faço?!?!?! Calma mana, vamos resolver! Ache o arquivo .angular-cli.json e troque o valor da chave “outDir” de “dist” para “public”

angular-cli.json

angular-cli.json

Vamos fazer o build novamente

ng build --prod
Buildado e prodado na pasta public!

Buildado e prodado na pasta public!

Uhuuu, agora sim, tudo na pasta public!!!! \o/ Feito isso vamos fazer o deploy para o firebase Para isso digite no terminal dentro da pasta do app

firebase deploy
Firebase Deploy

Firebase Deploy

Deploiado!!!!!! Vamos acessar a url e ver como ficou. No meu caso https://simplesapprealtime.firebaseapp.com

aplicação nas nuvens!!

aplicação nas nuvens!!

Vamos ver também como ficou dentro do console do firebase hosting

console do hosting

console do hosting

Como vcs podem ver o deploy foi feito e a cada novo envio o firebase hosting vai versionando, tornando fácil rollback caso ocorra algum problema, lindo né? <3

Amores, muito obrigada novamente pela paciência, mais tarde irei falar do Authentication, vamos fazer login simples para nossa aplicação Bjuss ❤

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup