Catch up on everthing we announced at this year's Firebase Summit. Learn more

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 versão 9 do SDK do Firebase para JavaScript, que usa um formato de módulo JavaScript.

Esse fluxo de trabalho usa NPM e requer bundlers de módulo ou ferramentas de framework do JavaScript porque o SDK v9 é otimizado para funcionar com bundlers de módulo 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 de app Firebase no código, é possível adicionar e começar a usar os serviços do Firebase.

Etapa 3: acessar o Firebase no app

Os serviços do Firebase (como Cloud Firestore, Authentication, Realtime Database, Configuração remota, entre outros) estão disponíveis para importação em subpacotes individuais.

O exemplo abaixo mostra como o SDK do Cloud Firestore Lite poderia ser utilizado 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: 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ódulo 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 agrupamento 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 seguintes serviços disponíveis no app da Web.

Os comandos a seguir mostram como importar bibliotecas do Firebase instaladas localmente com npm. Consulte a página Bibliotecas disponíveis para ver opções alternativas de importação.

Próximas etapas

Saiba mais sobre o Firebase: