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

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

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

Прежде чем добавить Firebase в приложение JavaScript, создайте проект 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 &>#39;firebase/service';

// TODO: Replace the following with your app&#39;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: