Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

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

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

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

Шаг 2: Установите SDK и инициализировать Firebase

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

Этот рабочий процесс использует НПЙ и требует модуля Упаковщики или JavaScript рамочного инструментов , поскольку v9 SDK оптимизирован для работы с модулем Упаковщиками для устранения неиспользуемого кода (дерево тряски) и размера уменьшения 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.

Шаг 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 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 / накопительный пакет) для уменьшения размера

Firebase Web SDK предназначен для работы с сборщиками модулей, чтобы удалить любой неиспользуемый код (встряхивание дерева). Мы настоятельно рекомендуем использовать этот подход для производственных приложений. Такие инструменты, как угловая CLI , Next.js , Вя C или Создать Реагировать приложение автоматически обрабатывать модуль пакетирование для библиотек , устанавливаемых через НПЙ и импортированную в ваш код.

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

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

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

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

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

Узнайте о Firebase: