如何在 React Web 应用程序中使用 Firebase 模拟器

Question

如何在本地使用 firebase 模拟器：

我可以在端口 4000 上本地运行模拟器，但是我无法让我的 react 应用在本地运行以使用它。

1. 云功能
2. 身份验证
3. Firestore

我有一个名为 firebase.js 的文件，其中包含以下内容：

import firebase from "firebase/app";
import "firebase/auth";

let config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

export default app;

在我的其他文件中，我像这样调用 firebase 来进行身份验证：

  //Login
  const login = async (email, password) => {
    return await app.auth().signInWithEmailAndPassword(email, password);
  };

Answer 1

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/functions";
import "firebase/firestore";

let config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = firebase.initializeApp(config);

if (window.location.hostname === "localhost") {
  app.functions().useFunctionsEmulator("http://localhost:5001");
  app.auth().useEmulator("http://localhost:9099");
  app.firestore().settings({
    host: "localhost:8080",
    ssl: false,
  });
}

export default app;