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

  1. Установите Firebase с помощью npm:

    npm install firebase

  2. Инициализируйте Firebase в своем приложении и создайте объект приложения Firebase:

    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 и начать использовать их.

    Если ваше приложение включает динамические функции, основанные на рендеринге на стороне сервера (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 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 предназначен для работы с сборщиками модулей для удаления любого неиспользуемого кода (встряхивания дерева). Мы настоятельно рекомендуем использовать этот подход для рабочих приложений. Такие инструменты, как Angular CLI , Next.js , Vue CLI или Create React App , автоматически обрабатывают объединение модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.

Дополнительную информацию см. в нашем руководстве «Использование сборщиков модулей с Firebase» .

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

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

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

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

Узнайте больше о Firebase:

,

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

  1. Установите Firebase с помощью npm:

    npm install firebase

  2. Инициализируйте Firebase в своем приложении и создайте объект приложения Firebase:

    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 и начать использовать их.

    Если ваше приложение включает динамические функции, основанные на рендеринге на стороне сервера (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 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 предназначен для работы с сборщиками модулей для удаления любого неиспользуемого кода (встряхивания дерева). Мы настоятельно рекомендуем использовать этот подход для рабочих приложений. Такие инструменты, как Angular CLI , Next.js , Vue CLI или Create React App , автоматически обрабатывают объединение модулей для библиотек, установленных через npm и импортированных в вашу кодовую базу.

Дополнительную информацию см. в нашем руководстве «Использование сборщиков модулей с Firebase» .

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

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

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

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

Узнайте больше о Firebase: