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 ❤

  • JavaScript Assíncrono – Introdução

    JavaScript tem muitas qualidades que eu, pessoalmente, admiro muito. Uma das mais divertidas é, sem dúvida, as possibilidades assíncronas desta linguagem! Uma feature divertida e, ao mesmo tempo, complexa. O JavaScript nos dá a possibilidade de escrever utilizando alguns paradigmas interessantes (e dignos de estudo aprofundado) como o paradigma procedural, o paradigma funcional ou com […]

  • Posição sobre quebra do Código de Conduta  –  BrazilJS Conf 2015

    Infelizmente tomamos conhecimento de uma violação do código de conduta da BrazilJS Conf 2015. Este fato chegou até nós após a conferência. Ou seja, uma atitude durante o evento (que é o ideal) se tornou impossível. Levamos a sério o código de conduta e acreditamos que todos os 1300 participantes também. Estamos discutindo como organização, […]

  • JavaScript só é difícil para quem começa do fim

    JavaScript só é difícil para quem começa do fim. Há poucos anos, desenvolver web apps era muito fácil, por exemplo, usávamos PHP (ou qualquer outra linguagem server side, como Python ou Ruby), alguns ifs e fors e renderizávamos HTML facilmente. Só precisávamos conhecer HTML, CSS e uma linguagem server side. Vamos voltar no tempo e […]

Patrocinadores BrazilJS

Bronze

BrazilJS® é uma iniciativa NASC.     Hosted by Getup