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 tem um projeto JavaScript, faça o download de um dos nossos exemplos de início rápido se quiser 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: solicite seu objeto de configuração do Firebase

Todas as etapas de configuração deste guia requerem a inicialização usando um objeto de configuração do Firebase.

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

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

Etapa 3: configurar seu app para usar o Firebase

É possível configurar um app da Web ou um app Node.js para usar o Firebase.

WEB NODE.JS

Configurar um app da Web

Use qualquer uma das seguintes opções ao configurar seu app JavaScript da Web para usar o Firebase:

Opção 1: adicionar SDKs do Firebase específicos de forma implícita a partir da CDN

É possível configurar a importação parcial do SDK do Firebase para JavaScript carregando os produtos do Firebase de que você precisa.

O Firebase armazena cada biblioteca do SDK do Firebase para JavaScript em nossa rede de fornecimento de conteúdo global (CDN, na sigla em inglês).

Por exemplo, para incluir apenas o Authentication e o Realtime Database, use as seguintes tags de script na tag body do seu app:

<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/5.10.1/firebase-app.js"></script>

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

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


Também é possível postergar a inclusão do SDK do Firebase até que a página inteira seja carregada.

Primeiro, adicione uma sinalização defer a cada tag de 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/5.10.1/firebase-app.js"></script>

<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

// ...

<script defer src="./init-firebase.js"></script>

Em seguida, 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);
SDKs do Firebase disponíveis para apps JavaScript (de forma implícita a partir da CDN)
Produto do Firebase Referência da biblioteca
Firebase básico
(obrigatória)

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
Authentication

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-firestore.js"></script>
SDK de cliente do Cloud Functions para Firebase

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>

Opção 2: agrupar ou carregar SDKs específicos de forma dinâmica

É possível configurar a importação parcial do SDK do Firebase para JavaScript carregando os produtos do Firebase de que você precisa.

Se você usar um bundler, como Browserify ou webpack, poderá importar individualmente os produtos do Firebase que quer usar por meio do código 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 npm firebase e salve-o no seu package.json arquivo executando o seguinte:

      npm install --save firebase
  2. Use os módulos do Firebase no seu app. Por exemplo, para carregar somente o Authentication e o Realtime Database, use as seguintes instruções de import:

    // 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/database";
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
     // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
SDKs do Firebase disponíveis para apps JavaScript (módulos de import)
Produto do Firebase Referência da biblioteca
Firebase básico (obrigatório) import "firebase/app";
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";
Cloud Storage import "firebase/storage";
Realtime Database import "firebase/database";

Opção 3: adicionar o SDK do Firebase para JavaScript completo

Para carregar todo o SDK do Firebase para JavaScript, use as seguintes tags de script na tag body do seu app:

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

  <!-- Loads the entire Firebase JavaScript SDK -->
  <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>

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

Configurar um app 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 seu package.json arquivo executando o seguinte:

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

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

      • Para incluir apenas os produtos do Firebase que você quer usar, como Authentication e o Realtime Database, use o seguinte:

        // 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/database");
        
      • Para incluir todo o SDK do Firebase para JavaScript, utilize a string abaixo:

        var firebase = require("firebase");
    • É possível usar o ES2015 para importar módulos usando import:

      • Para incluir apenas os produtos do Firebase que você quer usar, como Authentication e o Realtime Database, use o seguinte:

        // 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/database";
        
      • Para incluir todo o SDK do Firebase para JavaScript, utilize a string abaixo:

        import firebase from "firebase";
  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);
    
SDKs do Firebase disponíveis para apps JavaScript (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"

Etapa 4: 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()
Realtime Database firebase.database()

Outras opções de instalação

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 defaultDatabase = defaultProject.database();

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

À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 defaultDatabase = firebase.database();

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

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.

  1. Instale a Firebase CLI.

    Execute o seguinte comando em qualquer lugar no seu computador:

    npm install -g firebase-tools
  2. Vincule seu diretório de aplicativos local ao Firebase e gere um arquivo firebase.json (necessário para o Firebase Hosting).

    Execute o seguinte comando a partir da raiz do seu diretório de aplicativos local:

    firebase init

    Durante a inicialização, você será solicitado a especificar um diretório que contenha seus arquivos estáticos públicos, ou seja, seu diretório raiz público. O nome padrão do diretório procurado pelo Firebase é "público". Também é possível definir o diretório público posteriormente ao modificar seu arquivo firebase.json.

  3. Inicie o servidor local para desenvolvimento.

    Execute o seguinte comando a partir da raiz do seu diretório de aplicativos local:

    firebase serve

Carregar os SDKs a partir de URLs reservados

Se você hospedar seu app da Web no Firebase Hosting, configure esse aplicativo para carregar dinamicamente as bibliotecas do SDK do Firebase para JavaScript a partir de URLs reservados.

Nessa opção de configuração, depois que você implantar seu app no Firebase, ele extrai automaticamente o objeto de configuração do projeto em que ele foi implantado. É possível implementar o mesmo codebase em vários projetos do Firebase, mas não é necessário rastrear a configuração do Firebase usada para firebase.initializeApp().

Essa opção de configuração de URLs reservados também funciona para testar seu app da Web no local.

Por exemplo, para incluir apenas o Authentication e o Realtime Database, use as seguintes tags de script na tag body do seu app:

<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/5.10.1/firebase-app.js"></script>

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

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>
SDKs do Firebase disponíveis para apps JavaScript (URLs reservados)
Produto do Firebase Referência de biblioteca (URL reservado)
Firebase básico
(obrigatória)

<script src="/__/firebase/5.10.1/firebase-app.js"></script>
Authentication

<script src="/__/firebase/5.10.1/firebase-auth.js"></script>
Cloud Firestore

<script src="/__/firebase/5.10.1/firebase-firestore.js"></script>
SDK de cliente do Cloud Functions para Firebase

<script src="/__/firebase/5.10.1/firebase-functions.js"></script>
Cloud Messaging

<script src="/__/firebase/5.10.1/firebase-messaging.js"></script>
Cloud Storage

<script src="/__/firebase/5.10.1/firebase-storage.js"></script>
Realtime Database

<script src="/__/firebase/5.10.1/firebase-database.js"></script>
SDK do Firebase para JavaScript
(SDK completo)

<script src="/__/firebase/5.10.1/firebase.js"></script>

Saiba mais sobre essa opção de configuração na documentação do Hosting.

A seguir

Saiba mais sobre o Firebase:

Adicione serviços do Firebase ao seu app: