Adicionar o Firebase ao projeto JavaScript

Siga este guia para usar o SDK do Firebase para JavaScript no 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 a 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 app JavaScript, é necessário criar um projeto do Firebase para se 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.

Crie um projeto do Firebase

No Console do Firebase, clique em Adicionar projeto e depois selecione ou insira o Nome do projeto.

Se você tiver um projeto do Google Cloud, poderá selecioná-lo no menu suspenso para adicionar recursos do Firebase.
(Opcional) Se você estiver criando um novo projeto, poderá editar o ID dele.

O Firebase atribui automaticamente um ID exclusivo ao seu projeto. Consulte Noções básicas sobre projetos do Firebase para entender melhor como o Firebase usa o ID do projeto.

Não será possível alterar o ID do projeto depois que o Firebase provisionar os recursos para ele.
Para usar um identificador específico, é necessário editar seu ID do projeto durante esta etapa de configuração.
Clique em Continuar.

(Opcional) Configure o Google Analytics para o seu projeto, permitindo que você tenha uma ótima experiência ao usar qualquer um dos seguintes produtos do Firebase:

Quando solicitado, selecione para usar uma Conta do Google Analytics ou criar uma nova conta.
Se você decidir criar uma nova conta, selecione seu local de relatórios do Analytics e aceite as configurações de compartilhamento de dados e os termos do Google Analytics relacionados ao seu projeto.

Clique em Criar projeto (ou Adicionar Firebase, se você estiver usando um projeto do Google Cloud).

O Firebase provisiona recursos automaticamente para seu projeto. Quando o processo for concluído, você será direcionado para a página de visão geral do projeto no Console do Firebase.

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 app ao projeto do Firebase, clique em Adicionar app para exibir as opções da plataforma.
Digite o apelido do app.
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 do Hosting padrão do 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 mais vinculações. Cada site do Hosting só pode ser vinculado a um único app da Web do Firebase.
Observação: o Firebase Hosting não é necessário para você usar produtos do Firebase com o app da Web.
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 a 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 app da Web depende se você escolheu usar o Firebase Hosting para o app, quais ferramentas está utilizando com o app (como um bundler de módulo), ou se você está reconfigurando um app em Node.js. Caso precise de ajuda para escolher entre essas alternativas, consulte Formas de adicionar os SDKs da Web ao app.

Se você quiser testar a versão Beta do novo SDK otimizada para o desenvolvimento modular de apps, selecione a opção da versão 9 (Beta). Não há obrigatoriedade de suporte técnico para versões Beta.

Com npm

É possível configurar a importação parcial do SDK do Firebase para JavaScript e carregar apenas os produtos do Firebase necessários. Se você estiver usando um bundler (como Browserify ou webpack), é possível import (importar) produtos individuais do Firebase quando precisar deles.

Instale o SDK do Firebase para JavaScript:
1. Se você ainda não tiver um arquivo package.json, crie um executando o seguinte comando na raiz do projeto JavaScript:
```
npm init
```
2. Instale o pacote npm firebase e salve-o no arquivo package.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.7.1/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.7.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-firestore.js"></script>
</body>

Inclua todo o SDK do Firebase para JavaScript em vez dos SDKs individuais (não recomendado para aplicativos de produção)

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="https://www.gstatic.com/firebasejs/8.7.1/firebase.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>

Oriundo de 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.7.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.7.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.7.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.7.1/firebase-firestore.js"></script>
</body>

Inclua todo o SDK do Firebase para JavaScript em vez dos SDKs individuais (não recomendado para aplicativos de produção)

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="/__/firebase/8.7.1/firebase.js"></script>
  <body>

Inicialize o Firebase no app. 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 em Node.js

Instale o SDK do Firebase para JavaScript:
1. Se você ainda não tiver um arquivo package.json, crie um executando o seguinte comando na raiz do projeto JavaScript:
```
npm init
```
2. Instale o pacote npm firebase e salve-o no arquivo package.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 JavaScript
  
  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
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
```
  Inclua todo o SDK do Firebase para JavaScript em vez dos SDKs individuais (não recomendado para aplicativos de produção)
  
  Carregar o SDK completo não é eficiente para apps da Web de produção.
  Use essa opção apenas para fins de desenvolvimento.
```
var firebase = require("firebase");
```
- 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";
```
  Inclua todo o SDK do Firebase para JavaScript em vez dos SDKs individuais (não recomendado para aplicativos de produção)
  
  Carregar o SDK completo não é eficiente para apps da Web de produção.
  Use essa opção apenas para fins de desenvolvimento.
```
import firebase from "firebase";
```
  Observação: o uso da sintaxe import diretamente com o Node.js é experimental, mas é possível converter para o formato CommonJS (sintaxe require) usando compiladores como Babel.

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 o objeto de configuração, especialmente as seguintes "Opções do Firebase" obrigatórias: apiKey, projectId e appID. 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 de configuração 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 o app da Web do Firebase a um site do Firebase Hosting, é possível implantar o conteúdo e a configuração do site agora mesmo (ao configurar o 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 CLI do Firebase para saber como instalar a CLI ou atualizar para a versão mais recente.
Inicialize seu projeto do Firebase. Execute o seguinte comando na raiz do seu diretório de app local:
```
firebase init
```
O que este comando de inicialização faz?
- Vincula seu diretório de apps local ao Firebase.
- Gera um arquivo firebase.json (obrigatório para o Firebase Hosting).
- Solicita que você especifique um diretório raiz público que contenha os arquivos estáticos públicos (HTML, CSS, JS etc.).
  
  O nome padrão do diretório procurado pelo Firebase é "public". Também é possível definir o diretório público posteriormente ao modificar seu arquivo firebase.json.
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 e firebaseapp.com (PROJECT_ID.web.app e PROJECT_ID.firebaseapp.com).
1. Implante no seu site. Execute o seguinte comando no diretório raiz do app:
```
firebase deploy
```
2. 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 projeto durante o fluxo de trabalho de configuração do app da Web ou na página Hospedagem no console.

As instruções de início rápido fornecidas abaixo servem apenas para o desenvolvimento inicial. Para aplicativos de produção, siga as práticas recomendadas para configurar implantações nos seus sites adicionais.
1. Adicione seu site ao arquivo firebase.json (que foi criado durante firebase init).
  
  Observe que essa configuração de firebase.json pressupõe que você tem repositórios separados para cada um dos sites.
```
{
  "hosting": {
    "site": "SITE_ID",
    "public": "public",

    // ...
  }
}
```
2. Implante no seu site. Execute o seguinte comando no diretório raiz do app:
```
firebase deploy --only hosting:SITE_ID
```
3. Veja o site em:
  - SITE_ID.web.app
  - SITE_ID.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 conforme mostrado.

Saiba mais sobre os métodos disponíveis na documentação de referência do Firebase para JavaScript.

Produto do Firebase	Namespace (v8 e versões anteriores)	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

SDKs do Firebase para JS disponíveis (de URLs reservados do Hosting)

Produto do Firebase	Referência de biblioteca (URL reservado)
Firebase básico (obrigatório)	<script src="/__/firebase/8.7.1/firebase-app.js"></script>
Analytics	<script src="/__/firebase/8.7.1/firebase-analytics.js"></script>
Authentication	<script src="/__/firebase/8.7.1/firebase-auth.js"></script>
Cloud Firestore	<script src="/__/firebase/8.7.1/firebase-firestore.js"></script>
SDK de cliente do Cloud Functions para Firebase	<script src="/__/firebase/8.7.1/firebase-functions.js"></script>
Cloud Messaging	<script src="/__/firebase/8.7.1/firebase-messaging.js"></script> Para uma experiência ideal com o Cloud Messaging, adicione também o SDK do Firebase para Google Analytics.
Cloud Storage	<script src="/__/firebase/8.7.1/firebase-storage.js"></script>
Monitoramento de desempenho (versão Beta)	<script src="/__/firebase/8.7.1/firebase-performance.js"></script>
Realtime Database	<script src="/__/firebase/8.7.1/firebase-database.js"></script>
Configuração remota (versão Beta)	<script src="/__/firebase/8.7.1/firebase-remote-config.js"></script> Para uma experiência ideal com o Configuração remota, adicione também o SDK do Firebase para Google Analytics.
SDK do Firebase para JavaScript (todo o SDK)	<script src="/__/firebase/8.7.1/firebase.js"></script>

SDKs disponíveis do Firebase para JS (a partir da CDN)

Produto do Firebase	Referência da biblioteca
Firebase básico (obrigatório)	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
Analytics	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-analytics.js"></script>
Authentication	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-auth.js"></script>
Cloud Firestore	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-firestore.js"></script>
SDK de cliente do Cloud Functions para Firebase	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-functions.js"></script>
Cloud Messaging	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-messaging.js"></script> Para uma experiência ideal com o Cloud Messaging, adicione também o SDK do Firebase para Google Analytics.
Cloud Storage	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-storage.js"></script>
Monitoramento de desempenho (versão Beta)	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-performance.js"></script> Acesse os Primeiros passos do monitoramento de desempenho para adicionar uma opção independente e leve do monitoramento de desempenho ao SDK.
Realtime Database	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-database.js"></script>
Configuração remota (versão Beta)	<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-remote-config.js"></script> Para uma experiência ideal com a configuração remota, adicione também o SDK do Firebase para Google Analytics.

SDKs disponíveis do Firebase para JS (usando bundler com módulos)

Produto do Firebase	Referência de biblioteca para o SDK v8 com namespace
Firebase básico (obrigatório)	`import "firebase/app";`
Analytics	`import "firebase/analytics";`
Authentication	`import "firebase/auth";`
Cloud Firestore	`import "firebase/firestore";`
SDK de cliente do Cloud Functions para Firebase	`import "firebase/functions";`
Cloud Messaging	`import "firebase/messaging";` Para uma experiência ideal com o Cloud Messaging, adicione também o SDK do Firebase para Google Analytics.
Cloud Storage	`import "firebase/storage";`
Monitoramento de desempenho (versão Beta)	`import "firebase/performance";`
Realtime Database	`import "firebase/database";`
Configuração remota (versão Beta)	`import "firebase/remote-config";` Para uma experiência ideal com a configuração remota, adicione também o SDK do Firebase para Google Analytics.

SDKs do Firebase para JS disponíveis (módulos para Node.js)

Produto do Firebase	Módulo de biblioteca
Firebase básico (obrigatório)	`"firebase/app"`
Authentication	`"firebase/auth"`
Cloud Firestore	`"firebase/firestore"`
SDK de cliente do Cloud Functions para Firebase	`"firebase/functions"`
Realtime Database	`"firebase/database"`

Próximas etapas

Saiba mais sobre o Firebase:

Explore os apps de amostra do Firebase.
Aprenda a usar o Firebase Web Codelab 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 o painel Uso e faturamento no Console do Firebase para ter uma visão geral do uso do projeto em vários serviços 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.

Adicionar o Firebase ao projeto JavaScript

Pré-requisitos

Etapa 1: criar um projeto do Firebase

Etapa 2: registrar seu app com o Firebase

Etapa 3: adicionar SDKs do Firebase e inicializar o Firebase

Com npm

Usando a CDN

Oriundo de URLs do Hosting

Aplicativos em Node.js

Saiba mais sobre o objeto de configuração do Firebase

Etapa 4: (Opcional) instalar a CLI e implantar no Firebase Hosting

Site de hospedagem padrão

Site de hospedagem não padrão

Etapa 5: acessar o Firebase no seu app

Bibliotecas disponíveis

SDKs do Firebase para JS disponíveis (de URLs reservados do Hosting)

SDKs disponíveis do Firebase para JS (a partir da CDN)

SDKs disponíveis do Firebase para JS (usando bundler com módulos)

SDKs do Firebase para JS disponíveis (módulos para Node.js)

Próximas etapas