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

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

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

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

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

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

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

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

В этом рабочем процессе используется npm и требуются сборщики модулей или инструменты платформы JavaScript, поскольку модульный API оптимизирован для работы со сборщиками модулей для устранения неиспользуемого кода (сотрясения дерева) и уменьшения размера 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 — это объект, похожий на контейнер, в котором хранится общая конфигурация и используется аутентификация для всех служб Firebase. После того, как вы инициализируете объект приложения Firebase в своем коде, вы можете добавить и начать использовать службы Firebase.

Шаг 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 , автоматически обрабатывают объединение модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.

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

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

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

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

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

Узнайте о Firebase: