Adicionar o Firebase ao projeto em JavaScript

Pré-requisitos

Antes de começar, você precisará de um app JavaScript (Web ou Node.js) ao qual o Firebase será adicionado. Caso ainda não tenha um aplicativo, faça o download de um dos nossos exemplos de início rápido.

Para usar o Node.js em ambientes privilegiados, como servidores ou back-ends sem servidor, como o Cloud Functions, siga as instruções de configuração do SDK Admin, em vez utilizar clientes para acesso do usuário final, como um desktop com Node.js ou um dispositivo de Internet das Coisas (IoT, na sigla em inglês).

Adicionar o Firebase ao app

Para adicionar o Firebase ao seu app, são necessários um projeto do Firebase e um pequeno snippet de código de inicialização com alguns detalhes sobre seu projeto.

  1. Crie um projeto do Firebase no Console do Firebase.

    • Se você não tiver um projeto do Firebase, clique em Adicionar projeto e insira um nome de projeto existente do Google Cloud Platform ou um novo nome.
    • Se você tiver um projeto do Firebase que gostaria de usar, selecione-o no Console do Firebase.
  2. Na página de visão geral do projeto no Console do Firebase, clique em Adicionar o Firebase ao app da Web. Se o projeto já tiver um aplicativo, selecione Adicionar app na página de visão geral do projeto.

  3. Copie e cole o snippet de código personalizado do seu projeto na tag <head> da sua página, antes de outras tags de script.

    Veja abaixo um exemplo de snippet de código de inicialização:

Web

Clique em Copiar e cole o snippet do código no HTML do seu aplicativo. O snippet deve ter esta aparência:

<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

O snippet contém as informações de inicialização sobre como configurar o SDK para JavaScript do Firebase, para uso do Authentication, do Cloud Storage, do Realtime Database e do Cloud Firestore. Para reduzir a quantidade de código usada pelo aplicativo, inclua os recursos de que você precisará. Os componentes que podem ser instalados individualmente são os seguintes:

  • firebase-app: o cliente firebase principal (obrigatório)
  • firebase-auth: Firebase Authentication (opcional)
  • firebase-database: Firebase Realtime Database (opcional)
  • firebase-firestore: Cloud Firestore (opcional)
  • firebase-storage: Cloud Storage (opcional)
  • firebase-messaging: Firebase Cloud Messaging (opcional)
  • firebase-functions: Cloud Functions para Firebase (opcional)

Na CDN, inclua os componentes individuais de que você precisa (inclua firebase-app primeiro):

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

Se você usar um bundler como Browserify ou webpack, poderá adicionar apenas require() nos componentes que serão usados:

// Firebase App is always required and must be first
var firebase = require("firebase/app");

// Add additional services that you want to use
require("firebase/auth");
require("firebase/database");
require("firebase/firestore");
require("firebase/messaging");
require("firebase/functions");

// Comment out (or don't require) services that you don't want to use
// require("firebase/storage");

var config = {
  // ...
};
firebase.initializeApp(config);

Node.js

O Firebase SDK também está disponível em NPM. Caso você ainda não tenha um arquivo package.json, crie um por meio do npm init. Em seguida, instale o pacote NPM firebase e salve-o no seu package.json:

$ npm install firebase --save

Para usar o módulo no seu aplicativo, use a função require para chamá-lo a partir de qualquer arquivo JavaScript:

var firebase = require("firebase");

Se você estiver usando ES2015, use a função import para importar o módulo:

import firebase from "firebase";

Em seguida, inicialize o Firebase SDK com o snippet de código acima, que deve ter esta aparência:

// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Usar serviços do Firebase

Um App do Firebase pode usar vários serviços do Firebase. Cada serviço pode ser acessado a partir do namespace firebase:

Consulte os serviços individuais para documentação de acordo com o uso.

Executar um servidor da Web local para desenvolvimento

Ao criar um app da Web, algumas partes do SDK para JavaScript do Firebase exigem que seu app seja hospedado por um servidor, em vez de um sistema de arquivos local. Você pode usar a Firebase CLI para executar um servidor local deste modo:

$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Hospedar o app da Web com o Firebase Hosting

Se você estiver criando um app da Web e o conteúdo dele for inteiramente estático, você pode implantá-lo com o Firebase Hosting.

O Firebase Hosting é uma hospedagem estática da Web focada nos desenvolvedores para aplicativos de front-end modernos da Web. Com o Firebase Hosting, você pode implantar apps da Web que usam SSL no seu próprio domínio ou em uma rede de fornecimento de conteúdo global (CDN) com um único comando.

Importações SDK e inicialização implícita

Os apps da Web hospedados no Firebase hosting podem se beneficiar de uma configuração de projeto mais simples. Cole os seguintes trechos de código no seu aplicativo HTML para importar o SDK do Firebase e configurá-lo automaticamente para o projeto em que o seu aplicativo está hospedado:

    <!-- Firebase App is always required and must be first -->
    <script src="/__/firebase/5.8.4/firebase-app.js"></script>

    <!-- Add additional services that you want to use -->
    <script src="/__/firebase/5.8.4/firebase-auth.js"></script>
    <script src="/__/firebase/5.8.4/firebase-database.js"></script>
    <script src="/__/firebase/5.8.4/firebase-messaging.js"></script>
    <script src="/__/firebase/5.8.4/firebase-functions.js"></script>

    <!-- Comment out (or don't include) services that you don't want to use -->
    <!-- <script src="/__/firebase/5.8.4/firebase-storage.js"></script> -->

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

Inicializar vários aplicativos

Na maioria dos casos, é necessário inicializar um único aplicativo padrão. Você pode acessar serviços desse aplicativo de duas maneiras equivalentes:

// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

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

// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();

// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

Alguns casos de uso exigem que você crie vários aplicativos ao mesmo tempo. Por exemplo, talvez você queira ler em tempo real dados do Realtime Database de um projeto do Firebase e armazenar arquivos em outro projeto. Ou talvez queira autenticar um aplicativo enquanto o outro permanece sem autenticação. Com o Firebase SDK, é possível criar vários aplicativos ao mesmo tempo, cada um com as próprias informações de configuração.

// Initialize the default app
firebase.initializeApp(defaultAppConfig);

// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

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

// Use the shorthand notation to retrieve the default app's services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();

// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

Próximas etapas

Saiba mais sobre o Firebase:

Adicione serviços do Firebase ao seu app:

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.