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

bookmark_border Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Следуйте этому руководству, чтобы использовать 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:

• Изучите примеры приложений Firebase .

• Получите практический опыт работы с Firebase Web Codelab .

• Изучите открытый исходный код на GitHub .

• Ознакомьтесь с поддерживаемыми средами для Firebase JavaScript SDK.

• Ускорьте разработку с помощью дополнительных библиотек с открытым исходным кодом, поддерживаемых Firebase, таких как AngularFire , RxFire и FirebaseUI для веб-приложений .

• Подготовьтесь к запуску вашего приложения:

  • Настройте оповещения о бюджете для вашего проекта в консоли Google Cloud .
  • Отслеживайте панель использования и выставления счетов в консоли Firebase , чтобы получить общую картину использования вашего проекта в различных службах Firebase.
  • Ознакомьтесь с контрольным списком запуска Firebase .