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

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

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

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

Посетите раздел «Понимание проектов Firebase», чтобы узнать больше о проектах 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 configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

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

    Если ваше приложение включает динамические функции, основанные на серверном рендеринге (SSR), вам потребуется предпринять дополнительные шаги для обеспечения сохранения конфигурации между серверным и клиентским рендерингом. Реализуйте в серверной логике интерфейс 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) для уменьшения размера

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: