Добавьте Firebase в свой проект JavaScript

Следуйте этому руководству, чтобы использовать Firebase JavaScript SDK в своем веб-приложении или в качестве клиента для доступа конечного пользователя, например, в настольном приложении Node.js или приложении IoT.

Шаг 1 : Создайте проект Firebase и зарегистрируйте свое приложение.

Прежде чем вы сможете добавить Firebase в свое приложение JavaScript, вам нужно создать проект Firebase и зарегистрировать свое приложение в этом проекте. Когда вы регистрируете свое приложение в Firebase, вы получаете объект конфигурации Firebase, который вы будете использовать для подключения своего приложения к ресурсам проекта Firebase.

Посетите страницу Understanding Firebase Projects , чтобы узнать больше о проектах Firebase и передовых методах добавления приложений в проекты.

Если у вас еще нет проекта JavaScript и вы просто хотите опробовать продукт Firebase, вы можете загрузить один из наших примеров быстрого старта .

Шаг 2 : Установите SDK и инициализируйте Firebase

На этой странице описываются инструкции по настройке модульного API Firebase JS SDK, который использует формат модуля JavaScript .

Этот рабочий процесс использует npm и требует наличия сборщиков модулей или инструментария JavaScript-фреймворка, поскольку модульный API оптимизирован для работы со сборщиками модулей, что позволяет исключить неиспользуемый код (tree-shaking) и уменьшить размер SDK.

  1. Установите Firebase с помощью npm:

    npm install firebase

  2. Инициализируйте Firebase в своем приложении и создайте объект Firebase App:

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

    Firebase App — это контейнероподобный объект, который хранит общую конфигурацию и разделяет аутентификацию между службами Firebase. После инициализации объекта Firebase App в коде вы можете добавлять и начинать использовать службы Firebase.

    Если ваше приложение включает динамические функции, основанные на серверном рендеринге (SSR), вам нужно будет предпринять некоторые дополнительные шаги, чтобы гарантировать, что ваша конфигурация сохраняется при серверном рендеринге и клиентском рендеринге. В логике сервера реализуйте интерфейс FirebaseServerApp , чтобы оптимизировать управление сеансами вашего приложения с помощью service worker .

Шаг 3 : Получите доступ к Firebase в своем приложении

Службы Firebase (такие как Cloud Firestore , Authentication , Realtime Database , Remote Config и другие) доступны для импорта в отдельных подпакетах.

В примере ниже показано, как можно использовать Cloud Firestore Lite SDK для получения списка данных.

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

Шаг 4 : Используйте упаковщик модулей (webpack/Rollup) для уменьшения размера

Firebase Web SDK предназначен для работы с упаковщиками модулей для удаления любого неиспользуемого кода (tree-shaking). Мы настоятельно рекомендуем использовать этот подход для производственных приложений. Такие инструменты, как Angular CLI , Next.js , Vue CLI или Create React App , автоматически обрабатывают упаковку модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.

Дополнительную информацию смотрите в нашем руководстве Использование сборщиков модулей с Firebase .

Доступные сервисы Firebase для веб-сайтов

Теперь, когда вы настроены на использование Firebase, вы можете начать добавлять и использовать любые из следующих доступных служб Firebase в своем веб-приложении.

Следующие команды показывают, как импортировать библиотеки Firebase, установленные локально с помощью npm . Альтернативные варианты импорта см. в документации по доступным библиотекам .

1 Firebase AI Logic ранее назывался « Vertex AI in Firebase » с пакетом firebase/vertexai .

Следующие шаги

Узнайте больше о Firebase: