Hoje!

/Desenvolvimento

voltar
/Desenvolvimento

Simples aplicação real time com Angular 4 e Firebase – Parte 4

PorEvelyn Mendes em

Neste artigo irei mostrar como fazer o deploy para o Firebase, para isso iremos usar o Firebase-Tools que gerencia todos nesse 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

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

Você pode notar que tanto database, functions e hosting estão selecionados, você pode deixar assim, isso não irá influenciar no que iremos fazer. Pressione enter para vermos mais detalhes:

seleção da projeto

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

Configurações base de dados

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

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

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

index.html

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

Configurado!!!

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

ng build --prod
Buildado

Vamos ver onde os arquivos gerados pelo ng build estão:

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 “distparapublic

angular-cli.json

Vamos fazer o build novamente

ng build --prod
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

Deploiado!!!!!! Vamos acessar a url e ver como ficou. No meu caso: HTTPS://SIMPLESAPPREALTIME.FIREBASEAPP.COM

aplicação nas nuvens!

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

console do hosting

Como vocês podem ver o deploy foi feito e a cada novo envio o firebase hosting vai versionando, tornando fácil o 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.

Deixe um comentário! 0

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

leia mais
Este projeto é mantido e patrocinado pelas empresas: