O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Adicionar o Firebase a seu projeto JavaScript

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.

  1. 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.

  2. Digite o apelido do seu aplicativo.
    Esse apelido é um identificador interno de conveniência e só é visível no Console do Firebase.

  3. (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.

  4. 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á utilizando com o aplicativo, 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 seu app.

Se você quiser testar a versão Beta do novo SDK otimizado 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), poderá import [importar] produtos individuais do Firebase quando precisar deles.

  1. 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 seu projeto JavaScript:

      npm init

    2. Instale o pacote npm firebase e salve-o no arquivo package.json executando:

      npm install --save firebase

  2. 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";
    
  3. 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.

  1. 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.4.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.4.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
    </body>
    


  2. 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.

  1. 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.4.1/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.4.1/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.4.1/firebase-auth.js"></script>
      <script src="/__/firebase/8.4.1/firebase-firestore.js"></script>
    </body>
    


  2. 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 em Node.js

  1. 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 seu projeto JavaScript:

      npm init
    2. Instale o pacote npm firebase e salve-o no arquivo package.json executando:

      npm install --save firebase
  2. 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");
      


    • 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";
      
  3. 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 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 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.

  1. Verifique a documentação da Firebase CLI para saber como instalar a CLI ou atualizar para a versão mais recente.

  2. Inicialize seu projeto do Firebase. Execute o seguinte comando a partir da raiz do seu diretório de aplicativos local:

    firebase init

  3. 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 seu aplicativo:

      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 seu projeto durante o fluxo de trabalho de configuração do app da Web no console ou usando a página Hospedagem.

    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 seus sites.

      {
        "hosting": {
          "site": "SITE_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. Implante no seu site. Execute o seguinte comando no diretório raiz do seu aplicativo:

      firebase deploy --only hosting:SITE_ID
    3. Veja seu 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

Próximas etapas

Saiba mais sobre o Firebase:

Adicione serviços do Firebase ao seu app: