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

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.

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 app ao projeto do Firebase, clique em Adicionar app para exibir as opções da plataforma.

  2. Digite o apelido do app.
    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 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.

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

  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 projeto JavaScript:

      npm init

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

      npm install --save firebase@9.0.0-beta.6

  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 { initializeApp } from 'firebase/app';
    
    // Add the Firebase products that you want to use
    import { getAuth } from 'firebase/auth';
    import { getFirestore } from 'firebase/firestore';
    
  3. Inicialize o Firebase no seu app:

    import { initializeApp } from "firebase/app"
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    }
    
    const firebaseApp = 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/9.0.0-beta.6/firebase-app-compat.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.6/firebase-analytics-compat.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.6/firebase-auth-compat.js"></script>
      <script src="https://www.gstatic.com/firebasejs/9.0.0-beta.6/firebase-firestore-compat.js"></script>
    </body>
    


  2. 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
    import firebase from "firebase/compat/app";
    
    const firebaseApp = firebase.initializeApp({ /* config */ });
    

Usando URLs do Hosting

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 projeto JavaScript:

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

      npm install --save firebase@9.0.0-beta.6
  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:

    import { initializeApp } from "firebase/app"
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    }
    
    const firebaseApp = 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.

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

  2. Inicialize seu projeto do Firebase. Execute o seguinte comando na raiz do seu diretório de app 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 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.

    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 Importar (versão Beta do SDK v9) Web Node.js
Analytics import {} from 'firebase/analytics'
Authentication import {} from 'firebase/auth'
Cloud Firestore import {} from 'firebase/firestore'
SDK de cliente do Cloud Functions para Firebase import {} from 'firebase/functions'
Cloud Messaging import {} from 'firebase/messaging'
Cloud Storage import {} from 'firebase/storage'
Monitoramento de desempenho (versão Beta) import {} from 'firebase/performance'
Realtime Database import {} from 'firebase/database'
Configuração remota import {} from 'firebase/remoteConfig'

Bibliotecas disponíveis

Próximas etapas

Saiba mais sobre o Firebase:

Adicione serviços do Firebase ao seu app: