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 ❤

  • Sugestões para a BrazilJS Conf

    2017 será o ano da sétima edição consecutiva da BrazilJS Conf. Quem nos acompanha desde 2011, sabe que evoluímos muito de lá pra cá, mas não estamos nem na metade do caminho. 😀 Seguindo uma sugestão incrível de alguns participantes da edição de 2016 (via pesquisa de satisfação), estamos abrindo para a comunidade a possibilidade […]

  • HyperTerm agora é Hyper.app

    O time da Zeit anunciou na última semana uma mudança no terminal JS/HTML/CSS desenvolvido pela empresa. O HyperTerm agora é Hyper.app. Guillermo Rauch, um dos fundadores da empresa, comentou que o projeto iniciou apenas como um experimento e se tornou um dos projetos mais populares no GitHub neste ano, com mais de 9.000 estrelas. O […]

  • Home office para todos na Automattic, empresa por trás do WordPress

    Nesta semana, Matt anunciou o fechamento da sede física da Automattic em San Francisco. O motivo? Home office para todos.

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup