Настройка Firebase + React Boilerplate

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

Это руководство также включает настройки, позволяющие локальную разработку с горячей перезагрузкой и подключением к эмуляторам Firebase, как я подробно описал в этом посте 3,5 года назад.

Обратите внимание, что здесь используется веб-модульный API, а не веб-API с пространством имен. На момент написания этой статьи (20 августа 2023 г.) оба по-прежнему документированы в документации Firebase, поэтому для построения на основе этого шаблона вам необходимо обязательно следовать документации по веб-модульному API.

Инициализируйте проект React App и Firebase.

npx create-react-app .
firebase init
# Select: firestore, functions, hosting
# Select: Create new project

2. Включите Firestore:

Откройте UI Firebase Console, выберите только что созданный проект, перейдите в Firestore и нажмите Создать базу данных (запустите в тестовом режиме).

3. Создайте веб-приложение Firebase для своего проекта:

firebase init # need to re-run after enabling database
# Select: firestore, functions, hosting
# Accept all defaults
# Do you want to install dependencies with npm now? Yes
# What do you want to use as your public directory? build
# Configure as a single-page app (rewrite all urls to /index.html)? No

firebase apps:create
# Please choose the platform of the app: Web
# This will spit out a new command out at the end, which you should then run:

firebase apps:sdkconfig WEB 1:abcdefghijk…
# This will spit out a firebase config to use in the next step below.

npm install firebase

4. В каталоге src создайте файл с именем firebase.js, используя конфигурацию, полученную из последней команды Firebase на предыдущем шаге.

import { initializeApp } from "firebase/app";

// https://firebase.google.com/docs/functions/local-emulator#instrument-functions
import { getFunctions, connectFunctionsEmulator } from "firebase/functions";

// https://firebase.google.com/docs/emulator-suite/connect_firestore#android_apple_platforms_and_web_sdks
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

const firebase = initializeApp({
  projectId: "",
  appId: "",
  storageBucket: "",
  apiKey: "",
  authDomain: "",
  messagingSenderId: "",
});
const functions = getFunctions(firebase);
const firestore = getFirestore(firebase);

if (window.location.hostname === "localhost") {
  console.log(
    "Testing locally: hitting local functions and firestore emulators."
  );
  connectFunctionsEmulator(functions, "127.0.0.1", 5001);
  connectFirestoreEmulator(firestore, "127.0.0.1", 8080);
}

export { functions, firestore };

5. В firebase.json обновите значение hosting.public до build, чтобы развернутое приложение обслуживало скомпилированные файлы сборки, полученные из react build.

{
  // ...
  "hosting": {
    "public": "build",
    // ...
  }
}

6. Обновите functions/index.js, добавив шаблонную функцию, чтобы протестировать и убедиться, что интерфейс может правильно вызывать функции и взаимодействовать через них с базой данных.

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const { FieldValue } = require("firebase-admin/firestore");

admin.initializeApp();

exports.addUser = functions.https.onCall((data, context) => {
  const { name } = data;

  const db = admin.firestore();

  return db
    .collection("users")
    .add({
      name,
      signupTimestamp: FieldValue.serverTimestamp(),
    })
    .then(() => {
      return { message: "successfully added user", success: true };
    })
    .catch((error) => {
      throw new functions.https.HttpsError("unknown", error.message, error);
    });
});

7. Обновите App.js до простого приложения React, позволяющего добавлять пользователей в базу данных.

import logo from "./logo.svg";
import "./App.css";

import { useState } from "react";
import { functions } from "./firebase";
import { httpsCallable } from "firebase/functions";

function App() {
  const [name, setName] = useState(""); // State to hold the input value
  const [response, setResponse] = useState(""); // State to hold the response message

  const handleAddUser = async () => {
    try {
      const addUserFunction = httpsCallable(functions, "addUser");
      const result = await addUserFunction({ name });

      if (result.data.success) {
        setResponse(result.data.message);
        setName(""); // Clear the name field on successful addition
      } else {
        setResponse("Failed to add user.");
      }
    } catch (error) {
      setResponse("An error occurred.");
      console.error(
        "There was an error calling the addUser Firebase function",
        error
      );
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <div className="user-input-section">
          <input
            type="text"
            placeholder="Enter name..."
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <button onClick={handleAddUser} disabled={!name.trim()}>
            Add User
          </button>
        </div>

        <h2>{response}</h2>
      </header>
    </div>
  );
}

export default App;

8. Тестируйте локально:

В одном терминале запустите firebase emulators:start

Во втором терминале запустите npm start

Теперь ваше локальное веб-приложение должно открыться, и вы сможете убедиться, что пользователи были добавлены в пользовательском интерфейсе Firebase Emulator Suite: http://127.0.0.1:4000/firestore/data/users/.

9. Развертывание и тестирование в производстве:

# Compile build files in the build directory.
npm run build

# Deploy
firebase deploy

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

Надеюсь это поможет!

Примечание: приведенный выше код также можно найти в шаблонном репозитории, который я сделал здесь:https://github.com/sambshapiro/firebase-react-boilerplate. Однако все, что вам нужно для этого, включено в эту статью.

Настройка Firebase + React Boilerplate

Похожие вопросы