Ir para o console

Adicionar o Firebase a seu projeto do 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.

Antes de começar

  • Instale o editor ou o ambiente de desenvolvimento integrado de sua preferência.

  • Abra seu projeto JavaScript (Web ou Node.js).

  • Faça login no Firebase usando sua Conta do Google.

Se você ainda não tiver um projeto JavaScript, faça o download de um dos nossos exemplos de início rápido para testar o Firebase.

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 aplicativo

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 aplicativos a um projeto do Firebase.

  1. Na página de visão geral do projeto do Console do Firebase, clique no ícone da Web (code) 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.

    O 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 de hospedagem a qualquer momento nas Configurações do projeto.

    • Se você quiser configurar a hospedagem 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 de hospedagem só pode ser vinculado a um único app da Web do Firebase.

  4. Clique em Registrar aplicativo.

Etapa 3: adicionar SDKs do Firebase e inicializar o Firebase

É possível adicionar qualquer um dos produtos do Firebase compatíveis com o app.

Adicionar SDKs do Firebase ao seu aplicativo depende de você ter escolhido usar o Firebase Hosting para o aplicativo, das ferramentas que está usando com o aplicativo, como um bundler, ou se você está configurando um aplicativo Node.js.

A partir 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 codebase em vários projetos do Firebase, mas não é necessário rastrear a configuração em uso 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 Authentication e Cloud Firestore, adicione os seguintes scripts à parte inferior da sua 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="/__/firebase/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/6.2.0/firebase-auth.js"></script>
      <script src="/__/firebase/6.2.0/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>
    

A partir da 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 somente produtos específicos do Firebase, como Authentication e Cloud Firestore, adicione os seguintes scripts à parte inferior da sua 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/6.2.0/firebase-app.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/6.2.0/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
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

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 você usar um bundler, como Browserify ou webpack, poderá importar produtos individuais do Firebase quando precisar deles com o comando import.

  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 de npm firebase e salve-o no arquivo package.json executando o seguinte:

      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 * as firebase from "firebase/app";
    
    // 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
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Aplicativos 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 de npm firebase e salve-o no arquivo package.json executando o seguinte:

      npm install --save firebase
  2. Use uma das seguintes opções para usar o módulo do Firebase no seu aplicativo:

    • É possível solicitar módulos de qualquer arquivo JavaScript usando require

      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");
      


    • É possível usar o ES2015 para importar módulos usando 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 * as 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
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

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.

Se você usar URLs reservados do Hosting, sua configuração do Firebase será extraída automaticamente do seu projeto, assim você não precisará fornecer o objeto implicitamente no seu código.

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",
};

Você pode solicitar seu objeto de configuração do Firebase a qualquer momento.

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.

  1. Para implantar no Firebase, você usará a Firebase CLI, uma ferramenta de linha de comando. Instale ou atualize a CLI para a versão mais recente.

    Execute o seguinte comando npm em qualquer lugar no seu computador:

    npm install -g firebase-tools
  2. Faça login no Google. Execute este comando:

    firebase login

    Esse comando conecta sua máquina local ao Firebase e concede acesso aos seus projetos.

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

    firebase init

    Este comando de inicialização:

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

  4. Implante seu conteúdo e sua configuração de hospedagem no Firebase Hosting.

    Site de hospedagem padrão

    Por padrão, todos os projetos Firebase têm 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. Você pode adicionar sites ao seu projeto durante o fluxo de trabalho de configuração do app da Web no console ou a partir da página Hospedagem.

    1. Adicione seu site ao arquivo firebase.json criado durante firebase init.

      Observe que essa configuração de firebase.json pressupõe que você tenha repositórios separados para cada um dos seus sites.

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

      firebase deploy --only hosting:site-name
    3. 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 a partir do 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
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()

Bibliotecas disponíveis

Outras opções de instalação

Atrasar o carregamento de SDKs do Firebase a partir da CDN

Você pode atrasar a inclusão dos SDKs do Firebase até que a página inteira seja carregada.

  1. Adicione uma sinalização defer a cada tag script dos SDKs do Firebase e adie a inicialização do Firebase usando um segundo script, por exemplo:

    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Crie um arquivo init-firebase.js e inclua o código abaixo nele:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Usar vários projetos do Firebase em um único app

Na maioria dos casos, você só precisa inicializar o Firebase em um único app padrão. É possível acessar serviços desse aplicativo de duas maneiras equivalentes:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

Às vezes, no entanto, você precisa acessar vários projetos do Firebase ao mesmo tempo. Por exemplo, talvez queira ler os dados do banco de dados de um projeto do Firebase, mas precise armazenar os arquivos em um projeto diferente, ou então, queira autenticar um projeto e manter outro sem autenticação.

Com o SDK do Firebase para JavaScript, é possível inicializar e usar vários projetos do Firebase em um único app ao mesmo tempo, em que cada um mantém suas próprias informações de configuração.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

Executar um servidor da Web local para desenvolvimento

Ao criar um app da Web, algumas partes do SDK do Firebase para JavaScript exigem que ele seja hospedado por um servidor, em vez de um sistema de arquivos local. É possível usar a Firebase CLI para executar um servidor local.

Se você já configurou o Firebase Hosting para seu aplicativo, talvez já tenha concluído várias das etapas abaixo.

  1. Instale ou atualize a Firebase CLI. Execute o seguinte comando npm em qualquer lugar no seu computador:

    npm install -g firebase-tools
  2. Faça login no Google. Execute este comando:

    firebase login

    Esse comando conecta sua máquina local ao Firebase e concede acesso aos seus projetos.

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

    firebase init

    Este comando de inicialização:

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

  4. Inicie o servidor local para desenvolvimento. Execute o seguinte comando a partir da raiz do seu diretório de aplicativos local:

    firebase serve

Próximas etapas

Saiba mais sobre o Firebase:

Adicione serviços do Firebase ao seu app: