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

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

Шаг 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 и другие) можно импортировать в составе отдельных подпакетов.

В приведенном ниже примере показано, как можно использовать SDK Cloud Firestore Lite для получения списка данных.

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: