Как добавить Firebase в проект JavaScript

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

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

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

Подробнее о проектах Firebase и рекомендациях по добавлению приложений в проекты читайте в статье Общие сведения о проектах Firebase.

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

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

На этой странице приведены инструкции по настройке модульного API для SDK Firebase JavaScript, который использует формат модуля 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 configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

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

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

Шаг 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 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) для уменьшения размера

SDK Firebase JavaScript предназначен для работы со сборщиками модулей, которые удаляют неиспользуемый код (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.

2 Firebase SQL Connect ранее назывался Firebase Data Connect.

Дальнейшие действия

Подробнее о Firebase: