在Firebase Hosting中使用Firebase和React

Question

在Firebase Hosting中使用Firebase和React

6

我正在开发一个React应用程序，使用"create-react-app"创建（https://github.com/facebookincubator/create-react-app）。它将托管在Firebase Hosting中，我希望按照文档中所述的隐式初始化方式进行部署（https://firebase.google.com/docs/web/setup#sdk_imports_and_implicit_initialization），以便部署到多个项目（我有一个开发项目和几个生产项目）。

<script src="/__/firebase/init.js"></script>

我需要在上面的脚本中初始化“firebase”对象并在我的React组件中使用。我应该如何在多个React组件文件中导入它？我知道这只有在开发过程中使用“firebase serve”进行服务和部署时才可用，因此在开发过程中我正在尝试添加

<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

按照Firebase文档的描述，我将代码添加到我的index.html文件中。但是，当我尝试在React组件中导入Firebase时，它无法找到它或抱怨项目未初始化（我在html标记中执行了什么操作）。

我该如何从我的html脚本标记中导入已初始化的Firebase应用程序和Firebase库？

- pablo

嗨，Pablo，你最终解决了这个问题吗？我也在寻找解决方案。 - Shai Ben-Tovim

3个回答

0

你正在使用脚本标签直接在浏览器中提供 Firebase API。当您运行捆绑包时，它已经可以在浏览器中使用。

你正在使用create-react-app背后的webpack，但我认为您可能需要将其分离出来，以便您可以告诉它该软件包将使用externals属性在您的环境（浏览器）上可用。

https://webpack.js.org/configuration/externals/

据我所了解，使用create-react-app无法向webpack添加externals。

https://github.com/facebook/create-react-app/issues/780

也许最好放弃使用firebase的

- cbdeveloper

-1

尝试通过npm安装firebase包。然后，您可以通过导入它来轻松地在任何React组件中使用它。

import firebase from 'firebase';

您还可以在某些configureFirebase.js文件中导入firebase，您可以使用一些配置初始化firebase应用程序，然后导出配置的firebase实例并在任何组件中使用此实例。

这将非常有帮助：

import firebase from 'firebase'
const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    apiKey: "unreadablestuff",
    authDomain: "your-domain-name.firebaseapp.com",
    databaseURL: "https://your-domain-name.firebaseio.com",
    storageBucket: "your-domain-name.appspot.com",
    messagingSenderId: "123123123123"
};
const fire = firebase.initializeApp(config);
export default fire;

- Andrii Skrebets

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fotis Nalbadis · Accepted Answer

如果您正在使用create-react app和webpack，那么您应该已经在使用nodejs firebase：

npm install --save firebase

在部署时即可实时获取配置，您需要访问此网址：

/__/firebase/init.json

所以在尝试初始化Firebase之前，您需要进行异步调用以获取存储在该位置的JSON对象。以下是一些示例代码（使用axios进行异步调用）可包含在index.js中：

    import React from "react";
    import ReactDOM from "react-dom";
    import * as firebase from "firebase/app";
    import axios from "axios";

    const getFirebaseConfig = new Promise((resolve, reject) => {
      axios
        .get(`/__/firebase/init.json`)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => reject(err));
    });

    getFirebaseConfig
      .then(result => {
        firebase.initializeApp(result);

        ReactDOM.render(
          <div>XXXXX</div>,
          document.getElementById("root")
        );
      })
      .catch(err => console.log(err));

为了使这更加简化（使用npm start和dev firebase配置，并在部署时动态获取prod firebase配置），可以按照以下方式进行：

fbconfig.js:

if (process.env.NODE_ENV === "production") {
  module.exports = require("./prod");
} else {
  module.exports = require("./dev");
}

dev.js:

const firebaseConfig = {
  // your dev firebase configuration
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx"
};

const getFirebaseConfig = new Promise((resolve, reject) => {
  resolve(firebaseConfig);
});

export default getFirebaseConfig;

prod.js:

import axios from "axios";

const getFirebaseConfig = new Promise((resolve, reject) => {
  axios
    .get(`/__/firebase/init.json`)
    .then(res => {
      resolve(res.data);
    })
    .catch(err => reject(err));
});

export default getFirebaseConfig;

最后，在index.js文件中：

import getFirebaseConfig from "./fbconfig";

getFirebaseConfig.then(result => {
  firebase.initializeApp(result);
  ...etc
)}
.catch(err => console.log(err));