Adicionar o Firebase ao seu projeto JavaScript

Siga este guia para usar o SDK JavaScript do Firebase em seu aplicativo da Web ou como cliente para acesso do usuário final, por exemplo, em um desktop Node.js ou aplicativo IoT.

Etapa 1 : crie um projeto Firebase e registre seu aplicativo

Antes de adicionar o Firebase ao seu aplicativo JavaScript, você precisa criar um projeto do Firebase e registrar seu aplicativo nesse projeto. Ao registrar seu aplicativo no Firebase, você receberá um objeto de configuração do Firebase que será usado para conectar seu aplicativo aos recursos do projeto do Firebase.

Acesse Entenda os projetos do Firebase para saber mais sobre os projetos do Firebase e as práticas recomendadas para adicionar aplicativos aos projetos.

Se você ainda não tem um projeto JavaScript e deseja apenas testar um produto Firebase, faça download de um de nossos exemplos de início rápido .

Etapa 2 : instale o SDK e inicialize o Firebase

Esta página descreve instruções de configuração para a API modular do Firebase JS SDK, que usa um formato de módulo JavaScript .

Este fluxo de trabalho usa npm e requer empacotadores de módulos ou ferramentas de estrutura JavaScript porque a API modular é otimizada para funcionar com empacotadores de módulos para eliminar código não utilizado (tremor de árvore) e diminuir o tamanho do SDK.

  1. Instale o Firebase usando npm:

    npm install firebase

  2. Inicialize o Firebase no seu aplicativo e crie um objeto Firebase App:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Um aplicativo do Firebase é um objeto semelhante a um contêiner que armazena configurações comuns e compartilha autenticação entre os serviços do Firebase. Depois de inicializar um objeto Firebase App no ​​seu código, você poderá adicionar e começar a usar os serviços do Firebase.

Etapa 3 : acesse o Firebase em seu aplicativo

Os serviços do Firebase (como Cloud Firestore, Authentication, Realtime Database, Remote Config e muito mais) estão disponíveis para importação em subpacotes individuais.

O exemplo abaixo mostra como você pode usar o SDK do Cloud Firestore Lite para recuperar uma lista de dados.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Etapa 4 : Use um empacotador de módulo (webpack/Rollup) para redução de tamanho

O Firebase Web SDK foi projetado para funcionar com empacotadores de módulos para remover qualquer código não utilizado (tremor de árvore). Recomendamos fortemente o uso dessa abordagem para aplicativos de produção. Ferramentas como Angular CLI , Next.js , Vue CLI ou Create React App lidam automaticamente com o empacotamento de módulos para bibliotecas instaladas por meio de npm e importadas para sua base de código.

Consulte nosso guia Usando empacotadores de módulos com Firebase para obter mais informações.

Serviços Firebase disponíveis para web

Agora que você está configurado para usar o Firebase, pode começar a adicionar e usar qualquer um dos seguintes serviços disponíveis do Firebase em seu aplicativo Web.

Os comandos a seguir mostram como importar bibliotecas do Firebase instaladas localmente com npm . Para opções alternativas de importação, consulte a documentação das bibliotecas disponíveis .

Próximos passos

Saiba mais sobre o Firebase: