Adicionar o Firebase ao projeto JavaScript

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

Etapa 1: criar um projeto do Firebase e registrar o app

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

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.

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 introdutórias.

Etapa 2: instalar o SDK e inicializar o Firebase

Nesta página, descrevemos as instruções de configuração da API modular do SDK do Firebase para JavaScript, que usa o formato de módulo JavaScript.

Esse fluxo de trabalho usa npm e requer bundlers de módulos ou ferramentas de framework de JavaScript porque a API modular é otimizada para funcionar com bundlers de módulos para eliminar código não utilizado (tree shaking) e diminuir o tamanho do SDK.

  1. Instale o Firebase usando o npm:

    npm install firebase

  2. Inicialize o Firebase no app e crie um objeto do app Firebase:

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Um app Firebase é um objeto semelhante a um contêiner que armazena configurações comuns e compartilha a autenticação nos serviços do Firebase. Depois de inicializar um objeto do app Firebase no código, é possível adicionar e começar a usar os serviços do Firebase.

    Se o app incluir recursos dinâmicos com base na renderização do lado do servidor (SSR), você precisará realizar algumas etapas adicionais para garantir que sua configuração persista na renderização do servidor e nos passes de renderização do cliente. Na lógica do servidor, implemente a interface FirebaseServerApp para otimizar o gerenciamento de sessões do app com service workers.

Etapa 3: acessar o Firebase no app

Serviços do Firebase, como Cloud Firestore, Authentication, Realtime Database Remote Config e outros) estão disponíveis para importação em subpacotes individuais.

O exemplo abaixo mostra como usar o SDK do Cloud Firestore Lite para extrair 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: usar um bundler de módulo (webpack/rollup) para redução de tamanho

O SDK da Web do Firebase foi projetado para funcionar com bundlers de módulos para remover qualquer código não utilizado (tree shaking). É altamente recomendável usar essa abordagem para apps de produção. Ferramentas como Angular CLI, Next.js, Vue CLI ou Create React App processam automaticamente o empacotamento de módulos para bibliotecas instaladas por NPM e importadas para a base de código.

Consulte nosso guia Como usar os bundlers de módulos com o Firebase para mais informações.

Serviços do Firebase disponíveis na Web

Agora que está tudo pronto para usar o Firebase, comece a adicionar e usar qualquer um dos serviços disponíveis abaixo no app da Web.

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

Próximas etapas

Saiba mais sobre o Firebase: