Catch up on everthing we announced at this year's Firebase Summit. Learn more

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