Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Добавьте 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.

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

Этот рабочий процесс использует npm и требует сборщиков модулей или инструментов платформы JavaScript, поскольку пакет SDK версии 9 оптимизирован для работы со сборщиками модулей, что позволяет исключить неиспользуемый код (сотрясение дерева) и уменьшить размер 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: