Siga este guia para usar o SDK do Firebase para JavaScript no seu app da Web ou como cliente para acesso do usuário final, por exemplo, em um aplicativo IoT ou Node.js para computadores.
Pré-requisitos
Instale o editor ou o ambiente de desenvolvimento integrado de sua preferência.
Faça login no Firebase usando sua Conta do Google.
Se você ainda não tiver um projeto JavaScript e quiser apenas testar um produto do Firebase, faça o download de uma das nossas amostras de início rápido.
Etapa 1: criar um projeto do Firebase
Antes de adicionar o Firebase ao seu app JavaScript, é preciso criar um projeto do Firebase para conectar ao aplicativo.
Acesse Noções básicas sobre projetos do Firebase para saber mais sobre os projetos do Firebase e as práticas recomendadas para adicionar apps aos projetos.
Etapa 2: registrar seu app com o Firebase
Depois de criar um projeto do Firebase, é possível adicionar seu app da Web a ele.
Acesse Conheça os projetos do Firebase para saber mais sobre práticas recomendadas e considerações sobre como adicionar apps a um projeto do Firebase.
No centro da página de visão geral do projeto do Console do Firebase, clique no ícone da Web ( ) para iniciar o fluxo de trabalho de configuração.
Se você já adicionou um aplicativo ao seu projeto do Firebase, clique em Adicionar app para exibir as opções da plataforma.
Digite o apelido do seu aplicativo.
Esse apelido é um identificador interno de conveniência e só é visível no Console do Firebase.(Opcional) Configure o Firebase Hosting para seu app da Web.
É possível configurar o Firebase Hosting agora ou mais tarde. Você também pode vincular seu app da Web do Firebase a um site do Hosting a qualquer momento nas Configurações do projeto.
Se você quiser configurar o Hosting agora, selecione um site na lista suspensa para vinculá-lo ao app da Web do Firebase.
Essa lista mostra o site de hospedagem padrão do seu projeto e qualquer outro site que você tenha configurado no projeto.
Qualquer site que você já vinculou a um app da Web do Firebase não está disponível para vinculações adicionais. Cada site do Hosting só pode ser vinculado a um único app da Web do Firebase.
Clique em Registrar app.
Etapa 3: adicionar SDKs do Firebase e inicializar o Firebase
O Firebase fornece bibliotecas do JavaScript para a maioria dos produtos do Firebase, incluindo o Configuração remota, o FCM e muito mais. É possível adicionar qualquer uma das bibliotecas disponíveis ao seu app.
A maneira que os SDKs do Firebase são adicionados ao seu app da Web depende da sua escolha em usar o Firebase Hosting para o app, das ferramentas que está usando com o app, como um bundler de módulo, ou se você reconfigurando um app em Node.js. Caso precise de ajuda para escolher entre essas alternativas, consulte Formas de adicionar os SDKs da Web ao seu app.
Como usar os bundlers de módulos
É possível configurar a importação parcial do SDK do Firebase para JavaScript e carregar apenas os produtos do Firebase necessários. Se estiver usando um bundler (como Browserify
ou webpack), você poderá import
produtos individuais do Firebase quando precisar
deles.
Instale o SDK do Firebase para JavaScript:
Se você ainda não tiver um arquivo
package.json
, crie um executando o seguinte comando na raiz do seu projeto JavaScript:npm init
Instale o pacote npm
firebase
e salve-o no arquivopackage.json
executando:npm install --save firebase
Para incluir apenas produtos específicos do Firebase, como Authentication e Cloud Firestore, use
import
nos módulos do Firebase:// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // If you enabled Analytics in your project, add the Firebase SDK for Analytics import "firebase/analytics"; // Add the Firebase products that you want to use import "firebase/auth"; import "firebase/firestore";
Inicialize o Firebase no seu app:
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Usando a CDN
É possível configurar a importação parcial do SDK do Firebase para JavaScript e carregar apenas os produtos do Firebase necessários. A plataforma armazena cada biblioteca desse SDK na nossa rede de fornecimento de conteúdo (CDN, na sigla em inglês) global.
Para incluir apenas produtos específicos do Firebase (por exemplo, Authentication e Cloud Firestore), adicione os seguintes scripts à parte inferior da tag
<body>
, mas antes de usar os serviços do Firebase:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-firestore.js"></script> </body>
Inicialize o Firebase no seu app:
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </body>
Usando URLs do Hosting
Ao usar o Firebase Hosting, você pode configurar seu app para carregar as bibliotecas do SDK do Firebase para JavaScript de forma dinâmica a partir de URLs reservados. Saiba mais sobre como adicionar SDKs por meio de URLs reservados do Hosting.
Com essa opção de configuração, depois que seu app tiver sido
implantado no Firebase, ele extrairá automaticamente
o objeto de configuração do projeto em que foi
implementado. É possível implantar a mesma base do código em vários projetos do Firebase, mas não é necessário rastrear a configuração do Firebase usada para firebase.initializeApp()
.
Esta opção de configuração também funciona para testar seu app da Web localmente.
Para incluir somente produtos específicos do Firebase, como Analytics, Authentication ou Cloud Firestore, adicione os seguintes scripts à parte inferior da sua tag
<body>
, mas antes de usar qualquer serviço do Firebase:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="/__/firebase/8.2.7/firebase-app.js"></script> <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --> <script src="/__/firebase/8.2.7/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="/__/firebase/8.2.7/firebase-auth.js"></script> <script src="/__/firebase/8.2.7/firebase-firestore.js"></script> </body>
Inicialize o Firebase no seu aplicativo. Não é necessário incluir o objeto de configuração do Firebase ao usar os URLs reservados do Hosting:
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
Aplicativos do Node.js
Instale o SDK do Firebase para JavaScript:
Se você ainda não tiver um arquivo
package.json
, crie um executando o seguinte comando na raiz do seu projeto JavaScript:npm init
Instale o pacote npm
firebase
e salve-o no arquivopackage.json
executando:npm install --save firebase
Use uma das seguintes opções para usar o módulo do Firebase no seu aplicativo:
Você pode usar
require
em módulos de qualquer arquivo JavaScriptPara incluir apenas produtos específicos do Firebase, como Authentication e Cloud Firestore:
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs var firebase = require("firebase/app"); // Add the Firebase products that you want to use require("firebase/auth"); require("firebase/firestore");
Você pode usar o ES2015 para os módulos
import
Para incluir apenas produtos específicos do Firebase, como Authentication e Cloud Firestore:
// Firebase App (the core Firebase SDK) is always required and // must be listed before other Firebase SDKs import firebase from "firebase/app"; // Add the Firebase services that you want to use import "firebase/auth"; import "firebase/firestore";
Inicialize o Firebase no seu app:
// TODO: Replace the following with your app's Firebase project configuration // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Saiba mais sobre o objeto de configuração do Firebase
Para inicializar o Firebase no seu aplicativo, é preciso fornecer a configuração do projeto do Firebase do seu aplicativo. É possível conseguir o objeto de configuração do Firebase a qualquer momento.
Se você usar URLs reservados do Hosting, sua configuração do Firebase será extraída automaticamente do seu projeto do Firebase, assim não será necessário fornecer explicitamente o objeto de configuração no seu código.
Não recomendamos editar manualmente seu objeto de configuração, especialmente as seguintes "opções do Firebase" obrigatórias:
apiKey
,projectId
eappID
. Se você inicializar o app com valores inválidos ou ausentes para essas "opções do Firebase" obrigatórias, os usuários do app poderão ter problemas sérios.Se você ativou o Google Analytics no seu projeto do Firebase, o objeto de configuração contém o campo
measurementId
. Saiba mais sobre esse campo na página de primeiros passos do Google Analytics.
Este é o formato de um objeto de configuração com todos os serviços ativados (esses valores são preenchidos automaticamente):
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", databaseURL: "https://PROJECT_ID.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", measurementId: "G-MEASUREMENT_ID", };
Veja um objeto config com valores example:
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field var firebaseConfig = { apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO", authDomain: "myapp-project-123.firebaseapp.com", databaseURL: "https://myapp-project-123.firebaseio.com", projectId: "myapp-project-123", storageBucket: "myapp-project-123.appspot.com", messagingSenderId: "65211879809", appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c", measurementId: "G-8GSGZQ44ST" };
Etapa 4: (Opcional) instalar a CLI e implantar no Firebase Hosting
Se você vinculou seu app da Web do Firebase a um site do Firebase Hosting, implante o conteúdo e a configuração do seu site agora mesmo (ao configurar seu app da Web) ou a qualquer momento.
Para implantar no Firebase, você usará a CLI do Firebase, uma ferramenta de linha de comando.
Verifique a documentação da Firebase CLI para saber como instalar a CLI ou atualizar para a versão mais recente.
Inicialize seu projeto do Firebase. Execute o seguinte comando a partir da raiz do seu diretório de aplicativos local:
firebase init
Implante seu conteúdo e sua configuração de hospedagem no Firebase Hosting.
Site de hospedagem padrão
Por padrão, cada projeto do Firebase tem subdomínios gratuitos nos domínios
web.app
efirebaseapp.com
( eproject-id.web.app
).project-id.firebaseapp.com
Implante no seu site. Execute o seguinte comando no diretório raiz do seu aplicativo:
firebase deploy
Veja o site em um dos seus sites padrão:
project-id.web.app
project-id.firebaseapp.com
Site de hospedagem não padrão
Os projetos do Firebase são compatíveis com vários sites, que considerados seus sites não padrão. É possível adicionar sites ao seu projeto durante o fluxo de trabalho de configuração do app da Web no console ou usando a página Hospedagem.
Adicione seu site ao arquivo
firebase.json
(que foi criado durantefirebase init
).Observe que essa configuração de
firebase.json
pressupõe que você tem repositórios separados para cada um dos seus sites.{ "hosting": { "site": "site-name>", "public": "public", // ... } }
Implante no seu site. Execute o seguinte comando no diretório raiz do seu aplicativo:
firebase deploy --only hosting:site-name
Veja seu site em:
site-name.web.app
site-name.firebaseapp.com
Etapa 5: acessar o Firebase no seu app
O SDK do Firebase para JavaScript é compatível com os seguintes produtos do Firebase. Cada produto é
opcional e pode ser acessado usando o namespace firebase
.
Saiba mais sobre os métodos disponíveis na documentação de referência de JavaScript do Firebase.
Produto do Firebase | Namespace | Web | Node.js |
---|---|---|---|
Analytics | firebase.analytics() |
||
Authentication | firebase.auth() |
||
Cloud Firestore | firebase.firestore() |
||
SDK de cliente do Cloud Functions para Firebase | firebase.functions() |
||
Cloud Messaging | firebase.messaging() |
||
Cloud Storage | firebase.storage() |
||
Monitoramento de desempenho (versão Beta) | firebase.performance() |
||
Realtime Database | firebase.database() |
||
Configuração remota (versão Beta) | firebase.remoteConfig() |
Bibliotecas disponíveis
Próximas etapas
Saiba mais sobre o Firebase:
Explore os aplicativos de amostra do Firebase.
Aprenda a usar o Firebase Web Codelab (em inglês) na prática.
Explore o código aberto no GitHub.
Revise os ambientes compatíveis com o SDK do Firebase para JavaScript.
Acelere seu desenvolvimento com outras bibliotecas de código aberto do Firebase, como o AngularFire, RxFire e FirebaseUI for web (links em inglês).
Prepare-se para lançar seu aplicativo:
- Configure alertas de orçamento para o projeto no Console do Google Cloud.
- Monitore seu Painel de uso e faturamento no Console do Firebase.
- Consulte a lista de verificação de lançamento do Firebase.
Adicione serviços do Firebase ao seu app:
Hospede seu app com o Firebase Hosting.
Configure um fluxo de autenticação do usuário com o Authentication.
Armazene dados, como informações do usuário, usando o Cloud Firestore ou o Realtime Database.
Armazene arquivos, como fotos e vídeos, com o Cloud Storage.
Receba insights sobre problemas de desempenho do seu app com o Monitoramento de desempenho.
Acione o código de back-end que é executado em um ambiente seguro com o Cloud Functions.
Envie notificações com o Cloud Messaging.