Publicando projetos no Firebase

Configuração de um projeto com HTML, CSS e JavaScript

4 min readMar 8, 2020

Projetos do Firebase são contêineres para seus apps ou web aps.

Apps compartilham recursos como o Database e o Analytics em tempo real, ou apenas utilizam o recurso de hospedagem cloud remoto possibilitando o acesso de interfaces ou APIs através de uma URL pública.

Configurando um projeto remoto no Firebase Console

Para utilizar o Firebase, você precisa ter uma conta Google ativa. Se você utiliza, por exemplo, o Gmail ou Google Drive, você já tem uma conta Google.

Acesse https://console.firebase.google.com/ e faça o login com sua conta.
Clique em Criar um projeto ou Adicionar Projeto.
Na próxima tela, informe o nome do projeto e clique em Continuar. Ex.: negociacoes. Caso o nome já exista, será gerado um código aleatório ao final do nome do projeto.
O próximo passo é opcional, você escolhe se deseja adicionar o Google Analytics para receber métricas da sua aplicação. Ao optar pelo uso, você deverá informar na próxima tela a conta do Analytics a ser vinculada.

Com estes passos, o Firebase criará seu projeto e alocará os recursos de cloud necessários. Quando visualizar a mensagem "Seu novo projeto está pronto", clique em Continuar.

Instalando a Firebase CLI

É possível instalar a Firebase CLI por meio de um método compatível com seu sistema operacional, nível de experiência e/ou caso de uso. Seja qual for o modo de instalação da CLI, você terá acesso às mesmas funcionalidades e ao comando firebase.

npm install -g firebase-tools

Consulte documentação oficial e instale a versão adequada, se necessário:

Material de consulta sobre a Firebase CLI

A Firebase CLI ( GitHub) oferece uma série de ferramentas de gerenciamento, visualização e implantação para projetos do…

firebase.google.com

Inicializando seu projeto

Faça login no firebase com suas credenciais para gerar um token de autenticação:

firebase login:ci

Armazene o token em um lugar seguro pois você vai usá-lo em todos os comandos.

Execute o seguinte comando na raiz do diretório do projeto local para conectá-lo ao do Firebase:

firebase init --token <seu-token>

Durante a inicialização do projeto, siga estas etapas dos prompts da Firebase CLI:

Pressione a tecla Espaço para selecionar o Hostinge aperte Enter.
Selecione o projeto do Firebase criado anteriormente no Console para conectar ao diretório do seu projeto local. Escolha "Use an existing project".
Especifique um diretório para usar como diretório raiz público. Ex.: a pasta client, build ou dist/nome-do-projeto
Ao ser questionado sobre configurações de Single Page Application (Configure as a single-page app (rewrite all urls to /index.html)?), responda sim "y".
Se o arquivo index.html já existir, responsa "N" para não sobrescrevê-lo.

Após seguir estes passos, deverá ter sido criado o arquivo de configurações firebase.json e o diretório da ferramenta. Estes arquivos devem ser incluídos no seu repositório remoto, por exemplo, no Github.

Exemplo de interação com a Firebase CLI:

You're about to initialize a Firebase project in this directory:/Users/danilo/www/ecommerceWhich Firebase CLI features do you want to set
up for this folder? Press Space to select feature
s, then Enter to confirm your choices. 
Hosting: Configure and deploy Firebase Hosting sites=== Project SetupFirst, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.Please select an option: Create a new projectIf you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
 Please specify a unique project id (warning: ca
nnot be modified afterward) [6-30 characters]:
 angular-ecommerce- What would you like to call your project? (defa
ults to your project ID) angular-12345✔ Creating Google Cloud Platform project
✔ Adding Firebase resources to Google Cloud Platform project🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉Project information:
   - Project ID: angular-ecommerce
   - Project Name: angular-12345Firebase console is available at
https://console.firebase.google.com/project/angular-ecommerce/overview
i  Using project angular-ecommerce (angular-12345)=== Hosting SetupYour public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.What do you want to use as your public director
y? dist/ecommerce
Configure as a single-page app (rewrite all url
s to /index.html)? Yes
Set up automatic builds and deploys with GitHub
? No
File dist/ecommerce/index.html already exists. Overw
rite? No
Skipping write of dist/ecommerce/index.htmli  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...✔  Firebase initialization complete!

Se o seu projeto possui algum processo de build, como por exemplo, o uso de Babel e WebPack, é neste momento que você deve gerar a versão a ser colocada em produção. Por exemplo, rode o comando:

npm run build

Para implantar no seu site, execute o seguinte comando a partir da raiz do diretório local do seu projeto:

firebase deploy --token <seu-token>

Este comando implanta uma versão nos sites do Hosting padrão do projeto do Firebase:

projectID.web.app
projectID.firebaseapp.com

Caso você receba um erro 503 ao publicar, vá ao Firebase Console na web, escolha o seu projeto, vá no menu Authentication, e na aba Usuários, autorize a conexão de usuários por email e senha.

Testando seu hosting com sucesso

No Firebase Console da web, vá ao menu Hoisting, e escolha uma das URLs para acessar o projeto que você fez o deploy através da Firebase CLI.

Se o seu deploy foi feito com sucesso, você visualizará seu projeto na URL configurada.